<!DOCTYPE html>
<html lang="zh-CN" dir="ltr">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>Eslint | 龙陌的博客</title>
    <meta name="description" content="基于vite为基础搭建的风格脚手架,提供多种模板以便于更高效的解决业务需求！">
    <meta name="generator" content="VitePress v1.0.1">
    <link rel="preload stylesheet" href="/long-press/assets/style.BL65bImA.css" as="style">
    
    <script type="module" src="/long-press/assets/app.CKtEL6mi.js"></script>
    <link rel="preload" href="/long-press/assets/inter-roman-latin.Bu8hRsVA.woff2" as="font" type="font/woff2" crossorigin="">
    <link rel="modulepreload" href="/long-press/assets/chunks/framework.Cp_of1Ge.js">
    <link rel="modulepreload" href="/long-press/assets/chunks/theme.hH2tFlJ7.js">
    <link rel="modulepreload" href="/long-press/assets/chunks/PageInfo.vue_vue_type_script_setup_true_lang.9LRWY4ho.js">
    <link rel="modulepreload" href="/long-press/assets/chunks/dayjs.min.BrPrGVY0.js">
    <link rel="modulepreload" href="/long-press/assets/standard_eslint规范.md.Mu3t4FWn.lean.js">
    <link rel="icon" type="image/svg+xml" href="logo.ico">
    <meta name="author" content="龙陌">
    <meta name="referrer" content="no-referrer">
    <script id="check-dark-mode">(()=>{const e=localStorage.getItem("vitepress-theme-appearance")||"auto",a=window.matchMedia("(prefers-color-scheme: dark)").matches;(!e||e==="auto"?a:e==="dark")&&document.documentElement.classList.add("dark")})();</script>
    <script id="check-mac-os">document.documentElement.classList.toggle("mac",/Mac|iPhone|iPod|iPad/i.test(navigator.platform));</script>
  </head>
  <body>
    <div id="app"><div class="Layout" data-v-4c760b95><!--[--><!--]--><!--[--><span tabindex="-1" data-v-16c53dd7></span><a href="#VPContent" class="VPSkipLink visually-hidden" data-v-16c53dd7> Skip to content </a><!--]--><!----><header class="VPNav" data-v-4c760b95 data-v-0a463f3f><div class="VPNavBar has-sidebar top" data-v-0a463f3f data-v-460dba10><div class="wrapper" data-v-460dba10><div class="container" data-v-460dba10><div class="title" data-v-460dba10><div class="VPNavBarTitle has-sidebar" data-v-460dba10 data-v-ef777607><a class="title" href="/long-press/" data-v-ef777607><!--[--><!--]--><!--[--><img class="VPImage logo" src="/long-press/logo.ico" alt data-v-9cb742f0><!--]--><span data-v-ef777607>龙陌的博客</span><!--[--><!--]--></a></div></div><div class="content" data-v-460dba10><div class="content-body" data-v-460dba10><!--[--><!--]--><div class="VPNavBarSearch search" data-v-460dba10><!----><div id="docsearch"><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><span class="DocSearch-Button-Container"><svg width="20" height="20" class="DocSearch-Search-Icon" viewBox="0 0 20 20"><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg><span class="DocSearch-Button-Placeholder">Search</span></span><span class="DocSearch-Button-Keys"><span class="DocSearch-Button-Key">Meta</span><span class="DocSearch-Button-Key">K</span></span></button></div></div><nav aria-labelledby="main-nav-aria-label" class="VPNavBarMenu menu" data-v-460dba10 data-v-b298d4fd><span id="main-nav-aria-label" class="visually-hidden" data-v-b298d4fd>Main Navigation</span><!--[--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/long-press/" tabindex="0" data-v-b298d4fd data-v-5d92c3a7><!--[--><span data-v-5d92c3a7>💻 首页</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/long-press/guide/" tabindex="0" data-v-b298d4fd data-v-5d92c3a7><!--[--><span data-v-5d92c3a7>💡 指南</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/long-press/tools/" tabindex="0" data-v-b298d4fd data-v-5d92c3a7><!--[--><span data-v-5d92c3a7>🔧 编程工具</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/long-press/utils/" tabindex="0" data-v-b298d4fd data-v-5d92c3a7><!--[--><span data-v-5d92c3a7>🔧 常用工具类</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/long-press/standard/" tabindex="0" data-v-b298d4fd data-v-5d92c3a7><!--[--><span data-v-5d92c3a7>📋 前端规范</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/long-press/react/React实战,设计模式与最佳实践/" tabindex="0" data-v-b298d4fd data-v-5d92c3a7><!--[--><span data-v-5d92c3a7>⭐ React</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/long-press/typescript/" tabindex="0" data-v-b298d4fd data-v-5d92c3a7><!--[--><span data-v-5d92c3a7>⭐ TypeScript</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/long-press/css3/" tabindex="0" data-v-b298d4fd data-v-5d92c3a7><!--[--><span data-v-5d92c3a7>⭐ Css3</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/long-press/electron/" tabindex="0" data-v-b298d4fd data-v-5d92c3a7><!--[--><span data-v-5d92c3a7>⭐ Electron</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/long-press/linux/linux%E5%B8%B8%E7%94%A8%E5%91%BD%E4%BB%A4" tabindex="0" data-v-b298d4fd data-v-5d92c3a7><!--[--><span data-v-5d92c3a7>⭐ Linux</span><!--]--></a><!--]--><!--]--></nav><!----><div class="VPNavBarAppearance appearance" data-v-460dba10 data-v-815abbf3><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="Switch to dark theme" aria-checked="false" data-v-815abbf3 data-v-34066301 data-v-b6ab5a8a><span class="check" data-v-b6ab5a8a><span class="icon" data-v-b6ab5a8a><!--[--><span class="vpi-sun sun" data-v-34066301></span><span class="vpi-moon moon" data-v-34066301></span><!--]--></span></span></button></div><div class="VPSocialLinks VPNavBarSocialLinks social-links" data-v-460dba10 data-v-a0947e71 data-v-2fe70121><!--[--><a class="VPSocialLink no-icon" href="https://vitepress.vuejs.org/guide/getting-started" aria-label="github" target="_blank" rel="noopener" data-v-2fe70121 data-v-39684c0a><span class="vpi-social-github" /></a><a class="VPSocialLink no-icon" href="https://space.bilibili.com/248956095" aria-label target="_blank" rel="noopener" data-v-2fe70121 data-v-39684c0a><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="20" height="20"  viewBox="0 0 512 512" >
    <path fill="currentColor" d="M488.6 104.1c16.7 18.1 24.4 39.7 23.3 65.7v202.4c-.4 26.4-9.2 48.1-26.5 65.1c-17.2 17-39.1 25.9-65.5 26.7H92.02c-26.45-.8-48.21-9.8-65.28-27.2C9.682 419.4.767 396.5 0 368.2V169.8c.767-26 9.682-47.6 26.74-65.7C43.81 87.75 65.57 78.77 92.02 78h29.38L96.05 52.19c-5.75-5.73-8.63-13-8.63-21.79c0-8.8 2.88-16.06 8.63-21.797C101.8 2.868 109.1 0 117.9 0s16.1 2.868 21.9 8.603L213.1 78h88l74.5-69.397C381.7 2.868 389.2 0 398 0c8.8 0 16.1 2.868 21.9 8.603c5.7 5.737 8.6 12.997 8.6 21.797c0 8.79-2.9 16.06-8.6 21.79L394.6 78h29.3c26.4.77 48 9.75 64.7 26.1zm-38.8 69.7c-.4-9.6-3.7-17.4-10.7-23.5c-5.2-6.1-14-9.4-22.7-9.8H96.05c-9.59.4-17.45 3.7-23.58 9.8c-6.14 6.1-9.4 13.9-9.78 23.5v194.4c0 9.2 3.26 17 9.78 23.5s14.38 9.8 23.58 9.8H416.4c9.2 0 17-3.3 23.3-9.8c6.3-6.5 9.7-14.3 10.1-23.5V173.8zm-264.3 42.7c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.2 6.3-14 9.5-23.6 9.5c-9.6 0-17.5-3.2-23.6-9.5c-6.1-6.3-9.4-14-9.8-23.2v-33.3c.4-9.1 3.8-16.9 10.1-23.2c6.3-6.3 13.2-9.6 23.3-10c9.2.4 17 3.7 23.3 10zm191.5 0c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.1 6.3-14 9.5-23.6 9.5c-9.6 0-17.4-3.2-23.6-9.5c-7-6.3-9.4-14-9.7-23.2v-33.3c.3-9.1 3.7-16.9 10-23.2c6.3-6.3 14.1-9.6 23.3-10c9.2.4 17 3.7 23.3 10z"></path>
  </svg></a><!--]--></div><div class="VPFlyout VPNavBarExtra extra" data-v-460dba10 data-v-b81df352 data-v-603fa601><button type="button" class="button" aria-haspopup="true" aria-expanded="false" aria-label="extra navigation" data-v-603fa601><span class="vpi-more-horizontal icon" data-v-603fa601></span></button><div class="menu" data-v-603fa601><div class="VPMenu" data-v-603fa601 data-v-61aada2f><!----><!--[--><!--[--><!----><div class="group" data-v-b81df352><div class="item appearance" data-v-b81df352><p class="label" data-v-b81df352>外观</p><div class="appearance-action" data-v-b81df352><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="Switch to dark theme" aria-checked="false" data-v-b81df352 data-v-34066301 data-v-b6ab5a8a><span class="check" data-v-b6ab5a8a><span class="icon" data-v-b6ab5a8a><!--[--><span class="vpi-sun sun" data-v-34066301></span><span class="vpi-moon moon" data-v-34066301></span><!--]--></span></span></button></div></div></div><div class="group" data-v-b81df352><div class="item social-links" data-v-b81df352><div class="VPSocialLinks social-links-list" data-v-b81df352 data-v-2fe70121><!--[--><a class="VPSocialLink no-icon" href="https://vitepress.vuejs.org/guide/getting-started" aria-label="github" target="_blank" rel="noopener" data-v-2fe70121 data-v-39684c0a><span class="vpi-social-github" /></a><a class="VPSocialLink no-icon" href="https://space.bilibili.com/248956095" aria-label target="_blank" rel="noopener" data-v-2fe70121 data-v-39684c0a><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="20" height="20"  viewBox="0 0 512 512" >
    <path fill="currentColor" d="M488.6 104.1c16.7 18.1 24.4 39.7 23.3 65.7v202.4c-.4 26.4-9.2 48.1-26.5 65.1c-17.2 17-39.1 25.9-65.5 26.7H92.02c-26.45-.8-48.21-9.8-65.28-27.2C9.682 419.4.767 396.5 0 368.2V169.8c.767-26 9.682-47.6 26.74-65.7C43.81 87.75 65.57 78.77 92.02 78h29.38L96.05 52.19c-5.75-5.73-8.63-13-8.63-21.79c0-8.8 2.88-16.06 8.63-21.797C101.8 2.868 109.1 0 117.9 0s16.1 2.868 21.9 8.603L213.1 78h88l74.5-69.397C381.7 2.868 389.2 0 398 0c8.8 0 16.1 2.868 21.9 8.603c5.7 5.737 8.6 12.997 8.6 21.797c0 8.79-2.9 16.06-8.6 21.79L394.6 78h29.3c26.4.77 48 9.75 64.7 26.1zm-38.8 69.7c-.4-9.6-3.7-17.4-10.7-23.5c-5.2-6.1-14-9.4-22.7-9.8H96.05c-9.59.4-17.45 3.7-23.58 9.8c-6.14 6.1-9.4 13.9-9.78 23.5v194.4c0 9.2 3.26 17 9.78 23.5s14.38 9.8 23.58 9.8H416.4c9.2 0 17-3.3 23.3-9.8c6.3-6.5 9.7-14.3 10.1-23.5V173.8zm-264.3 42.7c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.2 6.3-14 9.5-23.6 9.5c-9.6 0-17.5-3.2-23.6-9.5c-6.1-6.3-9.4-14-9.8-23.2v-33.3c.4-9.1 3.8-16.9 10.1-23.2c6.3-6.3 13.2-9.6 23.3-10c9.2.4 17 3.7 23.3 10zm191.5 0c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.1 6.3-14 9.5-23.6 9.5c-9.6 0-17.4-3.2-23.6-9.5c-7-6.3-9.4-14-9.7-23.2v-33.3c.3-9.1 3.7-16.9 10-23.2c6.3-6.3 14.1-9.6 23.3-10c9.2.4 17 3.7 23.3 10z"></path>
  </svg></a><!--]--></div></div></div><!--]--><!--]--></div></div></div><!--[--><!--]--><button type="button" class="VPNavBarHamburger hamburger" aria-label="mobile navigation" aria-expanded="false" aria-controls="VPNavScreen" data-v-460dba10 data-v-156ee799><span class="container" data-v-156ee799><span class="top" data-v-156ee799></span><span class="middle" data-v-156ee799></span><span class="bottom" data-v-156ee799></span></span></button></div></div></div></div><div class="divider" data-v-460dba10><div class="divider-line" data-v-460dba10></div></div></div><!----></header><div class="VPLocalNav has-sidebar empty" data-v-4c760b95 data-v-bc5dff2d><div class="container" data-v-bc5dff2d><button class="menu" aria-expanded="false" aria-controls="VPSidebarNav" data-v-bc5dff2d><span class="vpi-align-left menu-icon" data-v-bc5dff2d></span><span class="menu-text" data-v-bc5dff2d>归档</span></button><div class="VPLocalNavOutlineDropdown" style="--vp-vh:0px;" data-v-bc5dff2d data-v-fe28bfa1><button data-v-fe28bfa1>返回顶部</button><!----></div></div></div><aside class="VPSidebar" data-v-4c760b95 data-v-e1756f1c><div class="curtain" data-v-e1756f1c></div><nav class="nav" id="VPSidebarNav" aria-labelledby="sidebar-aria-label" tabindex="-1" data-v-e1756f1c><span class="visually-hidden" id="sidebar-aria-label" data-v-e1756f1c> Sidebar Navigation </span><!--[--><!--]--><!--[--><div class="group" data-v-e1756f1c><section class="VPSidebarItem level-0 collapsible" data-v-e1756f1c data-v-b147bcc8><!----><div class="items" data-v-b147bcc8><!--[--><div class="VPSidebarItem level-1 is-link" data-v-b147bcc8 data-v-b147bcc8><div class="item" data-v-b147bcc8><div class="indicator" data-v-b147bcc8></div><a class="VPLink link link" href="/long-press/standard/CodeReview%E4%BB%A3%E7%A0%81%E5%AE%A1%E6%9F%A5" data-v-b147bcc8><!--[--><p class="text" data-v-b147bcc8>CodeReview代码审查</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b147bcc8 data-v-b147bcc8><div class="item" data-v-b147bcc8><div class="indicator" data-v-b147bcc8></div><a class="VPLink link link" href="/long-press/standard/Css%E8%A7%84%E8%8C%83" data-v-b147bcc8><!--[--><p class="text" data-v-b147bcc8>Css规范</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b147bcc8 data-v-b147bcc8><div class="item" data-v-b147bcc8><div class="indicator" data-v-b147bcc8></div><a class="VPLink link link" href="/long-press/standard/Git%E5%88%86%E6%94%AF%E5%BC%80%E5%8F%91%E8%A7%84%E8%8C%83" data-v-b147bcc8><!--[--><p class="text" data-v-b147bcc8>Git分支开发规范</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b147bcc8 data-v-b147bcc8><div class="item" data-v-b147bcc8><div class="indicator" data-v-b147bcc8></div><a class="VPLink link link" href="/long-press/standard/Node_CJS%E5%92%8CESM%E6%B7%B7%E5%90%88%E5%BC%80%E5%8F%91" data-v-b147bcc8><!--[--><p class="text" data-v-b147bcc8>Node_CJS和ESM混合开发</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b147bcc8 data-v-b147bcc8><div class="item" data-v-b147bcc8><div class="indicator" data-v-b147bcc8></div><a class="VPLink link link" href="/long-press/standard/React%E8%A7%84%E8%8C%83" data-v-b147bcc8><!--[--><p class="text" data-v-b147bcc8>React规范</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b147bcc8 data-v-b147bcc8><div class="item" data-v-b147bcc8><div class="indicator" data-v-b147bcc8></div><a class="VPLink link link" href="/long-press/standard/babelrc" data-v-b147bcc8><!--[--><p class="text" data-v-b147bcc8>babelrc</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b147bcc8 data-v-b147bcc8><div class="item" data-v-b147bcc8><div class="indicator" data-v-b147bcc8></div><a class="VPLink link link" href="/long-press/standard/commitlint" data-v-b147bcc8><!--[--><p class="text" data-v-b147bcc8>commitlint</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b147bcc8 data-v-b147bcc8><div class="item" data-v-b147bcc8><div class="indicator" data-v-b147bcc8></div><a class="VPLink link link" href="/long-press/standard/editorconfig" data-v-b147bcc8><!--[--><p class="text" data-v-b147bcc8>editorconfig</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b147bcc8 data-v-b147bcc8><div class="item" data-v-b147bcc8><div class="indicator" data-v-b147bcc8></div><a class="VPLink link link" href="/long-press/standard/eslint%E8%A7%84%E8%8C%83" data-v-b147bcc8><!--[--><p class="text" data-v-b147bcc8>eslint规范</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b147bcc8 data-v-b147bcc8><div class="item" data-v-b147bcc8><div class="indicator" data-v-b147bcc8></div><a class="VPLink link link" href="/long-press/standard/fatherrc.ts%E9%85%8D%E7%BD%AE%E6%96%87%E4%BB%B6" data-v-b147bcc8><!--[--><p class="text" data-v-b147bcc8>fatherrc.ts配置文件</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b147bcc8 data-v-b147bcc8><div class="item" data-v-b147bcc8><div class="indicator" data-v-b147bcc8></div><a class="VPLink link link" href="/long-press/standard/gitignore" data-v-b147bcc8><!--[--><p class="text" data-v-b147bcc8>gitignore</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b147bcc8 data-v-b147bcc8><div class="item" data-v-b147bcc8><div class="indicator" data-v-b147bcc8></div><a class="VPLink link link" href="/long-press/standard/gitlab.yml" data-v-b147bcc8><!--[--><p class="text" data-v-b147bcc8>gitlab.yml</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b147bcc8 data-v-b147bcc8><div class="item" data-v-b147bcc8><div class="indicator" data-v-b147bcc8></div><a class="VPLink link link" href="/long-press/standard/git%E6%8F%90%E4%BA%A4%E8%A7%84%E8%8C%83" data-v-b147bcc8><!--[--><p class="text" data-v-b147bcc8>git提交规范</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b147bcc8 data-v-b147bcc8><div class="item" data-v-b147bcc8><div class="indicator" data-v-b147bcc8></div><a class="VPLink link link" href="/long-press/standard/husky" data-v-b147bcc8><!--[--><p class="text" data-v-b147bcc8>husky</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b147bcc8 data-v-b147bcc8><div class="item" data-v-b147bcc8><div class="indicator" data-v-b147bcc8></div><a class="VPLink link link" href="/long-press/standard/json%E6%A0%BC%E5%BC%8F%E8%A7%84%E8%8C%83" data-v-b147bcc8><!--[--><p class="text" data-v-b147bcc8>json格式规范</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b147bcc8 data-v-b147bcc8><div class="item" data-v-b147bcc8><div class="indicator" data-v-b147bcc8></div><a class="VPLink link link" href="/long-press/standard/lint-staged" data-v-b147bcc8><!--[--><p class="text" data-v-b147bcc8>lint-staged</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b147bcc8 data-v-b147bcc8><div class="item" data-v-b147bcc8><div class="indicator" data-v-b147bcc8></div><a class="VPLink link link" href="/long-press/standard/package.json" data-v-b147bcc8><!--[--><p class="text" data-v-b147bcc8>package.json</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b147bcc8 data-v-b147bcc8><div class="item" data-v-b147bcc8><div class="indicator" data-v-b147bcc8></div><a class="VPLink link link" href="/long-press/standard/prettier" data-v-b147bcc8><!--[--><p class="text" data-v-b147bcc8>prettier</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b147bcc8 data-v-b147bcc8><div class="item" data-v-b147bcc8><div class="indicator" data-v-b147bcc8></div><a class="VPLink link link" href="/long-press/standard/prettierignore" data-v-b147bcc8><!--[--><p class="text" data-v-b147bcc8>prettierignore</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b147bcc8 data-v-b147bcc8><div class="item" data-v-b147bcc8><div class="indicator" data-v-b147bcc8></div><a class="VPLink link link" href="/long-press/standard/prettierrc" data-v-b147bcc8><!--[--><p class="text" data-v-b147bcc8>prettierrc</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b147bcc8 data-v-b147bcc8><div class="item" data-v-b147bcc8><div class="indicator" data-v-b147bcc8></div><a class="VPLink link link" href="/long-press/standard/pretty-quick" data-v-b147bcc8><!--[--><p class="text" data-v-b147bcc8>pretty-quick</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b147bcc8 data-v-b147bcc8><div class="item" data-v-b147bcc8><div class="indicator" data-v-b147bcc8></div><a class="VPLink link link" href="/long-press/standard/stylelint" data-v-b147bcc8><!--[--><p class="text" data-v-b147bcc8>stylelint</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b147bcc8 data-v-b147bcc8><div class="item" data-v-b147bcc8><div class="indicator" data-v-b147bcc8></div><a class="VPLink link link" href="/long-press/standard/sytlelint" data-v-b147bcc8><!--[--><p class="text" data-v-b147bcc8>sytlelint</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b147bcc8 data-v-b147bcc8><div class="item" data-v-b147bcc8><div class="indicator" data-v-b147bcc8></div><a class="VPLink link link" href="/long-press/standard/tsconfig.json" data-v-b147bcc8><!--[--><p class="text" data-v-b147bcc8>tsconfig.json</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b147bcc8 data-v-b147bcc8><div class="item" data-v-b147bcc8><div class="indicator" data-v-b147bcc8></div><a class="VPLink link link" href="/long-press/standard/ts%E8%A7%84%E8%8C%83" data-v-b147bcc8><!--[--><p class="text" data-v-b147bcc8>ts规范</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b147bcc8 data-v-b147bcc8><div class="item" data-v-b147bcc8><div class="indicator" data-v-b147bcc8></div><a class="VPLink link link" href="/long-press/standard/typings.d.ts" data-v-b147bcc8><!--[--><p class="text" data-v-b147bcc8>typings.d.ts</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b147bcc8 data-v-b147bcc8><div class="item" data-v-b147bcc8><div class="indicator" data-v-b147bcc8></div><a class="VPLink link link" href="/long-press/standard/vue%E8%A7%84%E8%8C%83" data-v-b147bcc8><!--[--><p class="text" data-v-b147bcc8>vue规范</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b147bcc8 data-v-b147bcc8><div class="item" data-v-b147bcc8><div class="indicator" data-v-b147bcc8></div><a class="VPLink link link" href="/long-press/standard/%E5%89%8D%E7%AB%AF%E5%BC%80%E5%8F%91%E6%9C%80%E4%BD%B3%E5%AE%9E%E8%B7%B5%E6%80%BB%E7%BB%93" data-v-b147bcc8><!--[--><p class="text" data-v-b147bcc8>前端开发最佳实践总结</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b147bcc8 data-v-b147bcc8><div class="item" data-v-b147bcc8><div class="indicator" data-v-b147bcc8></div><a class="VPLink link link" href="/long-press/standard/%E5%91%BD%E5%90%8D%E8%A7%84%E8%8C%83" data-v-b147bcc8><!--[--><p class="text" data-v-b147bcc8>命名规范</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b147bcc8 data-v-b147bcc8><div class="item" data-v-b147bcc8><div class="indicator" data-v-b147bcc8></div><a class="VPLink link link" href="/long-press/standard/%E5%9C%88%E5%A4%8D%E6%9D%82%E5%BA%A6" data-v-b147bcc8><!--[--><p class="text" data-v-b147bcc8>圈复杂度</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b147bcc8 data-v-b147bcc8><div class="item" data-v-b147bcc8><div class="indicator" data-v-b147bcc8></div><a class="VPLink link link" href="/long-press/standard/%E5%BC%80%E6%BA%90%E8%AF%81%E4%B9%A6" data-v-b147bcc8><!--[--><p class="text" data-v-b147bcc8>开源证书</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b147bcc8 data-v-b147bcc8><div class="item" data-v-b147bcc8><div class="indicator" data-v-b147bcc8></div><a class="VPLink link link" href="/long-press/standard/%E7%BB%84%E4%BB%B6%E5%B0%81%E8%A3%85%E8%A7%84%E8%8C%83" data-v-b147bcc8><!--[--><p class="text" data-v-b147bcc8>组件封装规范</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><!--]--><!--[--><!--]--></nav></aside><div class="VPContent has-sidebar" id="VPContent" data-v-4c760b95 data-v-308553a0><div class="VPDoc has-sidebar has-aside" data-v-308553a0 data-v-e512d8d8><!--[--><!--]--><div class="container" data-v-e512d8d8><div class="aside" data-v-e512d8d8><div class="aside-curtain" data-v-e512d8d8></div><div class="aside-container" data-v-e512d8d8><div class="aside-content" data-v-e512d8d8><div class="VPDocAside" data-v-e512d8d8 data-v-bca3b04c><!--[--><!--]--><!--[--><!--]--><div class="VPDocAsideOutline" role="navigation" data-v-bca3b04c data-v-ff0b6666><div class="content" data-v-ff0b6666><div class="outline-marker" data-v-ff0b6666></div><div class="outline-title" role="heading" aria-level="2" data-v-ff0b6666>本页目录</div><nav aria-labelledby="doc-outline-aria-label" data-v-ff0b6666><span class="visually-hidden" id="doc-outline-aria-label" data-v-ff0b6666> Table of Contents for current page </span><ul class="VPDocOutlineItem root" data-v-ff0b6666 data-v-69d389fc><!--[--><!--]--></ul></nav></div></div><!--[--><!--]--><div class="spacer" data-v-bca3b04c></div><!--[--><!--]--><!----><!--[--><!--]--><!--[--><!--]--></div></div></div></div><div class="content" data-v-e512d8d8><div class="content-container" data-v-e512d8d8><!--[--><!--]--><main class="main" data-v-e512d8d8><div style="position:relative;" class="vp-doc _long-press_standard_eslint%E8%A7%84%E8%8C%83" data-v-e512d8d8><div><h1 id="eslint" tabindex="-1">Eslint <a class="header-anchor" href="#eslint" aria-label="Permalink to &quot;Eslint&quot;">​</a></h1><nav class="table-of-contents"><ul><li><a href="#eslint-相关文档">Eslint 相关文档</a></li><li><a href="#注意node的版本">注意node的版本</a></li><li><a href="#通用方案">通用方案</a><ul><li><a href="#安装步骤">安装步骤</a></li><li><a href="#配置规则">配置规则</a></li><li><a href="#prettier和eslint冲突问题">Prettier和ESLint冲突问题</a></li><li><a href="#eslintignore">.eslintignore</a></li></ul></li><li><a href="#eslint在vue中的使用详解">ESLint在Vue中的使用详解</a><ul><li><a href="#vue的-lintonsave-配置项">vue的 lintonsave 配置项</a></li><li><a href="#自动化修复">自动化修复</a></li><li><a href="#在-vue-项目中的实践">在 Vue 项目中的实践</a></li><li><a href="#通过-vue-cli-初始化的项目">通过 vue-cli 初始化的项目</a></li><li><a href="#vue3-eslint-prettier实现保存自动格式化代码">Vue3+ESLint+Prettier实现保存自动格式化代码</a></li></ul></li><li><a href="#配置eslint">配置Eslint</a><ul><li><a href="#eslint-补充知识">eslint 补充知识</a></li><li><a href="#如何在老项目中加入eslint">如何在老项目中加入ESlint</a></li><li><a href="#格式化属性换行-vue-max-attributes-per-line">格式化属性换行 vue/max-attributes-per-line</a></li></ul></li><li><a href="#配置扩展-extends">配置扩展 extends</a></li><li><a href="#规则等级">规则等级</a></li><li><a href="#规则的优先级">规则的优先级</a></li><li><a href="#针对个别文件设置新的检查规则">针对个别文件设置新的检查规则</a></li><li><a href="#快速创建一个eslint配置文件">快速创建一个eslint配置文件</a></li><li><a href="#eslint常见报错">eslint常见报错</a></li><li><a href="#使用-eslint-自动调整-import-代码顺序">使用 eslint 自动调整 import 代码顺序</a></li><li><a href="#react相关">React相关</a><ul><li><a href="#react-编译模式配置">React 编译模式配置</a></li><li><a href="#react-属性自动排序规则配置">React 属性自动排序规则配置</a></li></ul></li><li><a href="#contributors">Contributors</a></li></ul></nav><div class="tip custom-block"><p class="custom-block-title">提示</p><p>js校验必备，注意eslint只针对js或ts做校验</p></div><h2 id="eslint-相关文档" tabindex="-1">Eslint 相关文档 <a class="header-anchor" href="#eslint-相关文档" aria-label="Permalink to &quot;Eslint 相关文档&quot;">​</a></h2><p><a href="https://cloud.tencent.com/developer/section/1135736" target="_blank" rel="noreferrer">中文开发手册</a></p><p><a href="http://eslint.cn/docs/rules/" target="_blank" rel="noreferrer">eslint规则地址</a></p><p><a href="https://mp.weixin.qq.com/s/-cUeeXumUtJOWVBofky27g" target="_blank" rel="noreferrer">ESLint全方位解析</a></p><p><a href="https://juejin.cn/post/6974223481181306888" target="_blank" rel="noreferrer">从 ESLint 开始，说透我如何在团队项目中基于 Vue 做代码校验</a></p><h2 id="注意node的版本" tabindex="-1">注意node的版本 <a class="header-anchor" href="#注意node的版本" aria-label="Permalink to &quot;注意node的版本&quot;">​</a></h2><p>To use ESLint, you must have Node.js (^12.22.0, ^14.17.0, or &gt;=16.0.0) installed and built with SSL support. (If you are using an official Node.js distribution, SSL is always built in.)</p><h2 id="通用方案" tabindex="-1">通用方案 <a class="header-anchor" href="#通用方案" aria-label="Permalink to &quot;通用方案&quot;">​</a></h2><h3 id="安装步骤" tabindex="-1">安装步骤 <a class="header-anchor" href="#安装步骤" aria-label="Permalink to &quot;安装步骤&quot;">​</a></h3><div class="language-shell vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">shell</span><pre class="shiki shiki-themes light-plus one-dark-pro vp-code"><code><span class="line"><span style="--shiki-light:#795E26;--shiki-dark:#61AFEF;">npm</span><span style="--shiki-light:#A31515;--shiki-dark:#98C379;"> install</span><span style="--shiki-light:#0000FF;--shiki-dark:#D19A66;"> --save-dev</span><span style="--shiki-light:#A31515;--shiki-dark:#98C379;"> eslint</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#795E26;--shiki-dark:#61AFEF;">touch</span><span style="--shiki-light:#A31515;--shiki-dark:#98C379;"> .eslintrc.js</span><span style="--shiki-light:#008000;--shiki-dark:#7F848E;--shiki-light-font-style:inherit;--shiki-dark-font-style:italic;"> # 或者npx eslint --init</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#795E26;--shiki-dark:#61AFEF;">npm</span><span style="--shiki-light:#A31515;--shiki-dark:#98C379;"> init</span><span style="--shiki-light:#A31515;--shiki-dark:#98C379;"> @eslint/config</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><h3 id="配置规则" tabindex="-1">配置规则 <a class="header-anchor" href="#配置规则" aria-label="Permalink to &quot;配置规则&quot;">​</a></h3><div class="language-text vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">text</span><pre class="shiki shiki-themes light-plus one-dark-pro vp-code"><code><span class="line"><span>/*</span></span>
<span class="line"><span>* &quot;off&quot; 或 0 ==&gt; 关闭规则</span></span>
<span class="line"><span>* &quot;warn&quot; 或 1 ==&gt; 打开的规则作为警告（不影响代码执行）</span></span>
<span class="line"><span>* &quot;error&quot; 或 2 ==&gt; 规则作为一个错误（代码不能执行，界面报错）</span></span>
<span class="line"><span>*/</span></span>
<span class="line"><span>module.exports = {</span></span>
<span class="line"><span>    env: {</span></span>
<span class="line"><span>        browser: true,</span></span>
<span class="line"><span>        es2021: true,</span></span>
<span class="line"><span>        node: true</span></span>
<span class="line"><span>    },</span></span>
<span class="line"><span>    extends: [</span></span>
<span class="line"><span>        &quot;eslint:recommended&quot;,</span></span>
<span class="line"><span>        &quot;plugin:react/recommended&quot;,</span></span>
<span class="line"><span>        &quot;plugin:@typescript-eslint/recommended&quot;,</span></span>
<span class="line"><span>    ],</span></span>
<span class="line"><span>    overrides: [],</span></span>
<span class="line"><span>    parser: &quot;@typescript-eslint/parser&quot;,</span></span>
<span class="line"><span>    parserOptions: {</span></span>
<span class="line"><span>        ecmaVersion: &quot;latest&quot;,</span></span>
<span class="line"><span>        sourceType: &quot;module&quot;,</span></span>
<span class="line"><span>    },</span></span>
<span class="line"><span>    plugins: [&quot;react&quot;, &quot;@typescript-eslint&quot;],</span></span>
<span class="line"><span>    /*</span></span>
<span class="line"><span>    *  &quot;off&quot; 或 0 ==&gt; 关闭规则</span></span>
<span class="line"><span>    *  &quot;warn&quot; 或 1 ==&gt; 打开的规则作为警告（不影响代码执行）</span></span>
<span class="line"><span>    *  &quot;error&quot; 或 2 ==&gt; 规则作为一个错误（代码不能执行，界面报错）</span></span>
<span class="line"><span>    */</span></span>
<span class="line"><span>    rules: {</span></span>
<span class="line"><span>        &#39;react/react-in-jsx-scope&#39;: &#39;off&#39;,</span></span>
<span class="line"><span>        &#39;no-console&#39;: &#39;error&#39;, // 禁止使用console</span></span>
<span class="line"><span>        &#39;no-unused-vars&#39;: &#39;error&#39;,// 禁止定义未使用的变量</span></span>
<span class="line"><span>        &#39;no-debugger&#39;: &#39;error&#39;, // 禁止使用debugger</span></span>
<span class="line"><span>        &#39;no-var&#39;: &#39;error&#39;, // 要求使用 let 或 const 而不是 var</span></span>
<span class="line"><span>    },</span></span>
<span class="line"><span>};</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br><span class="line-number">32</span><br><span class="line-number">33</span><br><span class="line-number">34</span><br><span class="line-number">35</span><br><span class="line-number">36</span><br></div></div><h3 id="prettier和eslint冲突问题" tabindex="-1">Prettier和ESLint冲突问题 <a class="header-anchor" href="#prettier和eslint冲突问题" aria-label="Permalink to &quot;Prettier和ESLint冲突问题&quot;">​</a></h3><p><a href="https://blog.csdn.net/xs20691718/article/details/122727900?spm=1001.2014.3001.5502" target="_blank" rel="noreferrer">ESLint 和 Prettier 配合使用</a></p><p>如果项目出现规则冲突以后，需要安装以下插件解决冲突，如果未出现冲突，则可以忽略。</p><p>安装插件 <code>eslint-plugin-prettier eslint-config-prettier</code></p><div class="language-shell vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">shell</span><pre class="shiki shiki-themes light-plus one-dark-pro vp-code"><code><span class="line"><span style="--shiki-light:#795E26;--shiki-dark:#61AFEF;">npm</span><span style="--shiki-light:#A31515;--shiki-dark:#98C379;"> install</span><span style="--shiki-light:#A31515;--shiki-dark:#98C379;"> eslint-plugin-prettier</span><span style="--shiki-light:#A31515;--shiki-dark:#98C379;"> eslint-config-prettier</span><span style="--shiki-light:#0000FF;--shiki-dark:#D19A66;"> -D</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><ul><li><p>eslint-config-prettier 的作用是关闭eslint中与prettier相互冲突的规则。</p></li><li><p>eslint-plugin-prettier 的作用是赋予eslint用prettier格式化代码的能力。</p></li></ul><p>安装依赖并修改.eslintrc文件</p><p>prettier 添加到 extends的最后</p><div class="language-text vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">text</span><pre class="shiki shiki-themes light-plus one-dark-pro has-diff vp-code"><code><span class="line"><span>{</span></span>
<span class="line"><span>  &quot;extends&quot;: [</span></span>
<span class="line diff add"><span>		&quot;plugin:prettier/recommended&quot;添加到数组的最后一个元素</span></span>
<span class="line"><span>	]</span></span>
<span class="line"><span>}</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><h3 id="eslintignore" tabindex="-1">.eslintignore <a class="header-anchor" href="#eslintignore" aria-label="Permalink to &quot;.eslintignore&quot;">​</a></h3><div class="language-text vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">text</span><pre class="shiki shiki-themes light-plus one-dark-pro vp-code"><code><span class="line"><span>dist/</span></span>
<span class="line"><span>node_modules/</span></span>
<span class="line"><span>types/</span></span>
<span class="line"><span>cache/</span></span>
<span class="line"><span>!docs/.vitepress</span></span>
<span class="line"><span>!/.eslintrc.js</span></span>
<span class="line"><span>!.test</span></span>
<span class="line"><span>.temp</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br></div></div><h2 id="eslint在vue中的使用详解" tabindex="-1">ESLint在Vue中的使用详解 <a class="header-anchor" href="#eslint在vue中的使用详解" aria-label="Permalink to &quot;ESLint在Vue中的使用详解&quot;">​</a></h2><h3 id="vue的-lintonsave-配置项" tabindex="-1">vue的 lintonsave 配置项 <a class="header-anchor" href="#vue的-lintonsave-配置项" aria-label="Permalink to &quot;vue的 lintonsave 配置项&quot;">​</a></h3><p><a href="https://cli.vuejs.org/zh/config/#lintonsave" target="_blank" rel="noreferrer">https://cli.vuejs.org/zh/config/#lintonsave</a></p><p>Type: boolean | &#39;warning&#39; | &#39;default&#39; | &#39;error&#39;</p><p>Default: &#39;default&#39;</p><p>是否在开发环境下通过 eslint-loader 在每次保存时 lint 代码。这个值会在 @vue/cli-plugin-eslint 被安装之后生效。</p><p>设置为 true 或 &#39;warning&#39; 时，eslint-loader 会将 lint 错误输出为编译警告。默认情况下，警告仅仅会被输出到命令行，且不会使得编译失败。</p><p>如果你希望让 lint 错误在开发时直接显示在浏览器中，你可以使用 lintOnSave: &#39;default&#39;。这会强制 eslint-loader 将 lint 错误输出为编译错误，同时也意味着 lint 错误将会导致编译失败。</p><p>设置为 error 将会使得 eslint-loader 把 lint 警告也输出为编译错误，这意味着 lint 警告将会导致编译失败。</p><p>或者，你也可以通过设置让浏览器 overlay 同时显示警告和错误：</p><div class="language-js vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki shiki-themes light-plus one-dark-pro vp-code"><code><span class="line"><span style="--shiki-light:#008000;--shiki-dark:#7F848E;--shiki-light-font-style:inherit;--shiki-dark-font-style:italic;">// vue.config.js</span></span>
<span class="line"><span style="--shiki-light:#267F99;--shiki-dark:#E5C07B;">module</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">.</span><span style="--shiki-light:#267F99;--shiki-dark:#E5C07B;">exports</span><span style="--shiki-light:#000000;--shiki-dark:#56B6C2;"> =</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> {</span></span>
<span class="line"><span style="--shiki-light:#001080;--shiki-dark:#E06C75;">	devServer</span><span style="--shiki-light:#001080;--shiki-dark:#ABB2BF;">:</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> {</span></span>
<span class="line"><span style="--shiki-light:#001080;--shiki-dark:#E06C75;">		overlay</span><span style="--shiki-light:#001080;--shiki-dark:#ABB2BF;">:</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> {</span></span>
<span class="line"><span style="--shiki-light:#001080;--shiki-dark:#E06C75;">			warnings</span><span style="--shiki-light:#001080;--shiki-dark:#ABB2BF;">:</span><span style="--shiki-light:#0000FF;--shiki-dark:#D19A66;"> true</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">,</span></span>
<span class="line"><span style="--shiki-light:#001080;--shiki-dark:#E06C75;">			errors</span><span style="--shiki-light:#001080;--shiki-dark:#ABB2BF;">:</span><span style="--shiki-light:#0000FF;--shiki-dark:#D19A66;"> true</span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">		}</span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">	}</span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">}</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br></div></div><p>当 lintOnSave 是一个 truthy 的值时，eslint-loader 在开发和生产构建下都会被启用。如果你想要在生产构建时禁用 eslint-loader，你可以用如下配置：</p><div class="language-js vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki shiki-themes light-plus one-dark-pro vp-code"><code><span class="line"><span style="--shiki-light:#008000;--shiki-dark:#7F848E;--shiki-light-font-style:inherit;--shiki-dark-font-style:italic;">// vue.config.js</span></span>
<span class="line"><span style="--shiki-light:#267F99;--shiki-dark:#E5C07B;">module</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">.</span><span style="--shiki-light:#267F99;--shiki-dark:#E5C07B;">exports</span><span style="--shiki-light:#000000;--shiki-dark:#56B6C2;"> =</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> {</span></span>
<span class="line"><span style="--shiki-light:#001080;--shiki-dark:#E06C75;">	lintOnSave</span><span style="--shiki-light:#001080;--shiki-dark:#ABB2BF;">:</span><span style="--shiki-light:#001080;--shiki-dark:#E5C07B;"> process</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">.</span><span style="--shiki-light:#001080;--shiki-dark:#E5C07B;">env</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">.</span><span style="--shiki-light:#0070C1;--shiki-dark:#E06C75;">NODE_ENV</span><span style="--shiki-light:#000000;--shiki-dark:#56B6C2;"> !==</span><span style="--shiki-light:#A31515;--shiki-dark:#98C379;"> &#39;production&#39;</span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">}</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br></div></div><h3 id="自动化修复" tabindex="-1">自动化修复 <a class="header-anchor" href="#自动化修复" aria-label="Permalink to &quot;自动化修复&quot;">​</a></h3><div class="language-bash vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki shiki-themes light-plus one-dark-pro vp-code"><code><span class="line"><span style="--shiki-light:#008000;--shiki-dark:#7F848E;--shiki-light-font-style:inherit;--shiki-dark-font-style:italic;"># 代码格式检查</span></span>
<span class="line"><span style="--shiki-light:#795E26;--shiki-dark:#61AFEF;">npm</span><span style="--shiki-light:#A31515;--shiki-dark:#98C379;"> run</span><span style="--shiki-light:#A31515;--shiki-dark:#98C379;"> lint</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#008000;--shiki-dark:#7F848E;--shiki-light-font-style:inherit;--shiki-dark-font-style:italic;"># 代码格式检查并自动修复</span></span>
<span class="line"><span style="--shiki-light:#795E26;--shiki-dark:#61AFEF;">npm</span><span style="--shiki-light:#A31515;--shiki-dark:#98C379;"> run</span><span style="--shiki-light:#A31515;--shiki-dark:#98C379;"> lint</span><span style="--shiki-light:#0000FF;--shiki-dark:#D19A66;"> --</span><span style="--shiki-light:#0000FF;--shiki-dark:#D19A66;"> --fix</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><p>只能帮我们自动修复格式类的错误,比如多写了几个空格,缩进,单双引号之类的.</p><p>如果是逻辑性的错误,比如定义了变量却没使用vscode按保存是修复不了的,需要手动修改</p><h3 id="在-vue-项目中的实践" tabindex="-1">在 Vue 项目中的实践 <a class="header-anchor" href="#在-vue-项目中的实践" aria-label="Permalink to &quot;在 Vue 项目中的实践&quot;">​</a></h3><p>关于如何在 Vue 中落地代码校验，一般是有 2 种情况：</p><ul><li>通过 vue-cli 初始化项目的时候已经选择了对应的校验配置</li><li>对于一个空的 Vue 项目，想接入代码校验</li></ul><p>其实这 2 种情况最终的校验的核心配置都是一样的，只是刚开始的时候安装的包有所区别。</p><p>下面通过分析 vue-cli 配置的代码校验，来看看它到底做了哪些事情，通过它安装的包以及包的作用，我们就会知道如何在空项目中配置代码校验了。</p><h3 id="通过-vue-cli-初始化的项目" tabindex="-1">通过 vue-cli 初始化的项目 <a class="header-anchor" href="#通过-vue-cli-初始化的项目" aria-label="Permalink to &quot;通过 vue-cli 初始化的项目&quot;">​</a></h3><p>如果你的项目最初是通过 vue-cli 新建的，那么在新建的时候会让你选</p><ul><li>是否支持 eslint；</li><li>是否开启保存校验；</li><li>是否开启提交前校验；</li><li></li></ul><p>如果都开启了话，会安装如下几个包：</p><ul><li>eslint：前面 2 大章节介绍的就是这玩意，ESLint 出品，是代码校验的基础包，且提供了很多内置的 Rules，比如 eslint:recommended 经常被作为项目的 JS 检查规范被引入；</li><li>babel-eslint：一个对 Babel 解析器的包装，使其能够与 ESLint 兼容；</li><li>lint-staged：请看后面 pre-commit 部分；</li><li>@vue/cli-plugin-eslint</li><li>eslint-plugin-vue</li><li></li></ul><p>下面重点介绍 @vue/cli-plugin-eslint 和 eslint-plugin-vue，说下这 2 个包是干嘛的。</p><p><strong>@vue/cli-plugin-eslint</strong> 这个包它主要干了 2 件事情：</p><p>第一件事</p><p>往 package.json 里注册了一个命令：</p><div class="language-text vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">text</span><pre class="shiki shiki-themes light-plus one-dark-pro vp-code"><code><span class="line"><span>{</span></span>
<span class="line"><span>    &quot;scripts&quot;: {</span></span>
<span class="line"><span>        &quot;lint&quot;: &quot;vue-cli-service lint&quot;</span></span>
<span class="line"><span>    }</span></span>
<span class="line"><span>}</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><p>执行这个命令之后，它会去检查和修复部分可以修复的问题。</p><p>默认查找的文件是 src 和 tests 目录下所有的 .js,.jsx,.vue 文件，以及项目根目录下所有的 js 文件（比如，也会检查 .eslintrc.js）。</p><p>当然你也可以自定义的传入参数和校验文件：</p><div class="language-text vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">text</span><pre class="shiki shiki-themes light-plus one-dark-pro vp-code"><code><span class="line"><span>vue-cli-service lint [options] [...files]</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><p>支持的参数如下：</p><ul><li>--no-fix: 不会修复 errors 和 warnings；</li><li>--max-errors [limit]：指定导致出现 npm ERR 错误的最大 errors 数量；</li></ul><p>第二件事</p><p>增加了代码保存触发校验的功能 lintOnSave，这个功能默认是开启的。如果想要关闭这个功能，可以在 vue.config.js 里配置，习惯上只开启 development 环境下的代码保存校验功能：</p><div class="language-text vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">text</span><pre class="shiki shiki-themes light-plus one-dark-pro vp-code"><code><span class="line"><span>module.exports = {</span></span>
<span class="line"><span>    lintOnSave: process.env.NODE_ENV === &#39;development&#39;,</span></span>
<span class="line"><span>}</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><p>lintOnSave 参数说明：</p><ul><li>true 或者 warning：开启保存校验，会将 errors 级别的错误在终端中以 WARNING 的形式显示。默认的，WARNING 将不会导致编译失败；</li><li>false：不开启保存校验；</li><li>error：开启保存校验，会将 errors 级别的错误在终端中以 ERROR 的形式出现，会导致编译失败，同时浏览器页面变黑，显示 Failed to compile。</li></ul><p><strong>eslint-plugin-vue</strong></p><p>eslint-plugin-vue 是对 .vue 文件进行代码校验的插件。</p><p>针对这个插件，它提供了这几个扩展</p><ul><li>plugin:vue/base：基础</li><li>plugin:vue/essential：预防错误的（用于 Vue 2.x）</li><li>plugin:vue/recommended：推荐的，最小化任意选择和认知开销（用于 Vue 2.x）；</li><li>plugin:vue/strongly-recommended：强烈推荐，提高可读性（用于 Vue 2.x）；</li><li>plugin:vue/vue3-essential：（用于 Vue 3.x）</li><li>plugin:vue/vue3-strongly-recommended：（用于 Vue 3.x）</li><li>plugin:vue/vue3-recommended：（用于 Vue 3.x）</li><li></li></ul><p>各扩展规则列表：vue rules</p><p>看到这么一堆的扩展，是不是都不知道选哪个了</p><p>代码规范的东西，原则还是得由各自的团队去磨合商议出一套适合大家的规则。不过，如果你用的是 Vue2，我这里可以推荐 2 套 extends 配置：</p><div class="language-text vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">text</span><pre class="shiki shiki-themes light-plus one-dark-pro vp-code"><code><span class="line"><span>{</span></span>
<span class="line"><span>    // Vue 官方示例上的配置</span></span>
<span class="line"><span>   extends: [&#39;eslint:recommended&#39;, &#39;plugin:vue/recommended&#39;],  </span></span>
<span class="line"><span></span></span>
<span class="line"><span>   // 或者使用 AlloyTeam 团队那套</span></span>
<span class="line"><span>   extends: [&#39;alloy&#39;, &#39;alloy/vue&#39;]</span></span>
<span class="line"><span>}</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br></div></div><p><strong>配置和插件对应的解析器</strong></p><p>如果是 Vue 2.x 项目，配置了 eslint-plugin-vue 插件和 extends 后，template 校验还是会失效，因为不管是 ESLint 默认的解析器 Espree 还是 babel-eslint 都只能解析 JS，无法解析 template 的内容。</p><p>而 vue-eslint-parser 只能解析 template 的内容，但是不会解析 JS，因此还需要对解析器做如下配置：</p><div class="language-text vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">text</span><pre class="shiki shiki-themes light-plus one-dark-pro vp-code"><code><span class="line"><span>{</span></span>
<span class="line"><span>    parser: &#39;vue-eslint-parser&#39;,</span></span>
<span class="line"><span>    parseOptions: {</span></span>
<span class="line"><span>        parser: &#39;babel-eslint&#39;,</span></span>
<span class="line"><span>        ecmaVersion: 12,</span></span>
<span class="line"><span>        sourceType: &#39;module&#39;</span></span>
<span class="line"><span>    },</span></span>
<span class="line"><span>    extends: [</span></span>
<span class="line"><span>        &#39;eslint:recommended&#39;, </span></span>
<span class="line"><span>        &#39;plugin:vue/recommended&#39;</span></span>
<span class="line"><span>    ],</span></span>
<span class="line"><span>    plugins: [&#39;vue&#39;]</span></span>
<span class="line"><span>}</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br></div></div><p>安装Eslint&amp;Prettier相关依赖</p><div class="language-bash vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki shiki-themes light-plus one-dark-pro vp-code"><code><span class="line"><span style="--shiki-light:#795E26;--shiki-dark:#61AFEF;">pnpm</span><span style="--shiki-light:#A31515;--shiki-dark:#98C379;"> add</span><span style="--shiki-light:#A31515;--shiki-dark:#98C379;"> eslint</span><span style="--shiki-light:#A31515;--shiki-dark:#98C379;"> prettier</span><span style="--shiki-light:#A31515;--shiki-dark:#98C379;"> eslint-config-prettier</span><span style="--shiki-light:#A31515;--shiki-dark:#98C379;"> eslint-plugin-prettier</span><span style="--shiki-light:#0000FF;--shiki-dark:#D19A66;"> -Dw</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><p>安装检测typescript语法及风格依赖</p><div class="language-bash vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki shiki-themes light-plus one-dark-pro vp-code"><code><span class="line"><span style="--shiki-light:#795E26;--shiki-dark:#61AFEF;">pnpm</span><span style="--shiki-light:#A31515;--shiki-dark:#98C379;"> add</span><span style="--shiki-light:#A31515;--shiki-dark:#98C379;"> @typescript-eslint/eslint-plugin</span><span style="--shiki-light:#A31515;--shiki-dark:#98C379;"> @typescript-eslint/parser</span><span style="--shiki-light:#0000FF;--shiki-dark:#D19A66;"> -Dw</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><p>.eslintrc</p><div class="language-text vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">text</span><pre class="shiki shiki-themes light-plus one-dark-pro vp-code"><code><span class="line"><span></span></span>
<span class="line"><span>  &quot;root&quot;: true,</span></span>
<span class="line"><span>  &quot;env&quot;: {</span></span>
<span class="line"><span>    &quot;browser&quot;: true,</span></span>
<span class="line"><span>    &quot;es2021&quot;: true,</span></span>
<span class="line"><span>    &quot;node&quot;: true</span></span>
<span class="line"><span>  },</span></span>
<span class="line"><span>  &quot;extends&quot;: [</span></span>
<span class="line"><span>    &quot;eslint:recommended&quot;,</span></span>
<span class="line"><span>    &quot;plugin:@typescript-eslint/recommended&quot;,</span></span>
<span class="line"><span>    &quot;plugin:prettier/recommended&quot;,</span></span>
<span class="line"><span>    &quot;prettier/@typescript-eslint&quot; // 禁用TS插件中与 Prettier 冲突的规则</span></span>
<span class="line"><span>    // 之后vue react等其它插件,需要在后面做配置</span></span>
<span class="line"><span>    // prettier/**</span></span>
<span class="line"><span>    // 解决Prettier与插件之间兼容问题</span></span>
<span class="line"><span>  ],</span></span>
<span class="line"><span>  &quot;overrides&quot;: [],</span></span>
<span class="line"><span>  &quot;parser&quot;: &quot;@typescript-eslint/parser&quot;,</span></span>
<span class="line"><span>  &quot;parserOptions&quot;: {</span></span>
<span class="line"><span>    &quot;ecmaVersion&quot;: &quot;latest&quot;,</span></span>
<span class="line"><span>    &quot;sourceType&quot;: &quot;module&quot;</span></span>
<span class="line"><span>  },</span></span>
<span class="line"><span>  &quot;plugins&quot;: [&quot;@typescript-eslint&quot;],</span></span>
<span class="line"><span>  &quot;rules&quot;: {}</span></span>
<span class="line"><span>}</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br></div></div><h3 id="vue3-eslint-prettier实现保存自动格式化代码" tabindex="-1">Vue3+ESLint+Prettier实现保存自动格式化代码 <a class="header-anchor" href="#vue3-eslint-prettier实现保存自动格式化代码" aria-label="Permalink to &quot;Vue3+ESLint+Prettier实现保存自动格式化代码&quot;">​</a></h3><p><a href="https://blog.csdn.net/qq_44910894/article/details/131012372" target="_blank" rel="noreferrer">https://blog.csdn.net/qq_44910894/article/details/131012372</a></p><h2 id="配置eslint" tabindex="-1">配置Eslint <a class="header-anchor" href="#配置eslint" aria-label="Permalink to &quot;配置Eslint&quot;">​</a></h2><p>项目搭建完成后，根目录下会自动生成一个.eslintrc.js文件，我们直接来看默认的配置：</p><div class="language-js vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki shiki-themes light-plus one-dark-pro vp-code"><code><span class="line"><span style="--shiki-light:#267F99;--shiki-dark:#E5C07B;">module</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">.</span><span style="--shiki-light:#267F99;--shiki-dark:#E5C07B;">exports</span><span style="--shiki-light:#000000;--shiki-dark:#56B6C2;"> =</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> {</span></span>
<span class="line"><span style="--shiki-light:#001080;--shiki-dark:#E06C75;">	root</span><span style="--shiki-light:#001080;--shiki-dark:#ABB2BF;">:</span><span style="--shiki-light:#0000FF;--shiki-dark:#D19A66;"> true</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">,</span></span>
<span class="line"><span style="--shiki-light:#001080;--shiki-dark:#E06C75;">	env</span><span style="--shiki-light:#001080;--shiki-dark:#ABB2BF;">:</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> {</span></span>
<span class="line"><span style="--shiki-light:#001080;--shiki-dark:#E06C75;">		node</span><span style="--shiki-light:#001080;--shiki-dark:#ABB2BF;">:</span><span style="--shiki-light:#0000FF;--shiki-dark:#D19A66;"> true</span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">	},</span></span>
<span class="line"><span style="--shiki-light:#001080;--shiki-dark:#E06C75;">	extends</span><span style="--shiki-light:#001080;--shiki-dark:#ABB2BF;">:</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> [</span><span style="--shiki-light:#A31515;--shiki-dark:#98C379;">&#39;plugin:vue/essential&#39;</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">, </span><span style="--shiki-light:#A31515;--shiki-dark:#98C379;">&#39;@vue/prettier&#39;</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">],</span></span>
<span class="line"><span style="--shiki-light:#001080;--shiki-dark:#E06C75;">	rules</span><span style="--shiki-light:#001080;--shiki-dark:#ABB2BF;">:</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> {</span></span>
<span class="line"><span style="--shiki-light:#A31515;--shiki-dark:#98C379;">		&#39;no-console&#39;</span><span style="--shiki-light:#001080;--shiki-dark:#ABB2BF;">:</span><span style="--shiki-light:#001080;--shiki-dark:#E5C07B;"> process</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">.</span><span style="--shiki-light:#001080;--shiki-dark:#E5C07B;">env</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">.</span><span style="--shiki-light:#0070C1;--shiki-dark:#E06C75;">NODE_ENV</span><span style="--shiki-light:#000000;--shiki-dark:#56B6C2;"> ===</span><span style="--shiki-light:#A31515;--shiki-dark:#98C379;"> &#39;production&#39;</span><span style="--shiki-light:#000000;--shiki-dark:#C678DD;"> ?</span><span style="--shiki-light:#A31515;--shiki-dark:#98C379;"> &#39;error&#39;</span><span style="--shiki-light:#000000;--shiki-dark:#C678DD;"> :</span><span style="--shiki-light:#A31515;--shiki-dark:#98C379;"> &#39;off&#39;</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">,</span></span>
<span class="line"><span style="--shiki-light:#A31515;--shiki-dark:#98C379;">		&#39;no-debugger&#39;</span><span style="--shiki-light:#001080;--shiki-dark:#ABB2BF;">:</span><span style="--shiki-light:#001080;--shiki-dark:#E5C07B;"> process</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">.</span><span style="--shiki-light:#001080;--shiki-dark:#E5C07B;">env</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">.</span><span style="--shiki-light:#0070C1;--shiki-dark:#E06C75;">NODE_ENV</span><span style="--shiki-light:#000000;--shiki-dark:#56B6C2;"> ===</span><span style="--shiki-light:#A31515;--shiki-dark:#98C379;"> &#39;production&#39;</span><span style="--shiki-light:#000000;--shiki-dark:#C678DD;"> ?</span><span style="--shiki-light:#A31515;--shiki-dark:#98C379;"> &#39;error&#39;</span><span style="--shiki-light:#000000;--shiki-dark:#C678DD;"> :</span><span style="--shiki-light:#A31515;--shiki-dark:#98C379;"> &#39;off&#39;</span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">	},</span></span>
<span class="line"><span style="--shiki-light:#001080;--shiki-dark:#E06C75;">	parserOptions</span><span style="--shiki-light:#001080;--shiki-dark:#ABB2BF;">:</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> {</span></span>
<span class="line"><span style="--shiki-light:#001080;--shiki-dark:#E06C75;">		parser</span><span style="--shiki-light:#001080;--shiki-dark:#ABB2BF;">:</span><span style="--shiki-light:#A31515;--shiki-dark:#98C379;"> &#39;@typescript-eslint/parser&#39;</span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">	}</span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">}</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br></div></div><p>这里extends是一个数组，数组第一个成员&quot;plugin:vue/essential&quot;表示的是：引入eslint-plugin-vue插件，并开启essential类别中的一系列规则。</p><p>eslint-plugin-vue把所有规则分为四个类别，依次为：base, essential, strongly-recommended, recommended，后面的每个类别都是对前一个类别的拓展。除了这四个类别外，还有两个未归类的规则，所有的类别及规则都可以在这里查看。</p><p>这里默认启用的是essential类别里面的规则，我们也可以使用&quot;plugin:vue/strongly-recommended&quot; 或 &quot;plugin:vue/recommend&quot; 启用更多的规则，如果仅仅想启用strongly-recommended和recommend里面的部分规则，可以在.eslintrc.js文件的rules选项中配置。</p><h3 id="eslint-补充知识" tabindex="-1">eslint 补充知识 <a class="header-anchor" href="#eslint-补充知识" aria-label="Permalink to &quot;eslint 补充知识&quot;">​</a></h3><p>extends的属性值可以是：</p><p>指定配置的字符串（配置文件的路径、可共享配置的名称、eslint:recommended 或 eslint:all） 字符串数组：每个配置继承它前面的配置 可选的配置项如下：</p><p>eslint:recommended 启用一些列核心规则 可共享的配置（比如，eslint-config-standard），这是一个npm包，属性值可以省略包名的前缀eslint-config- 插件，是一个 npm 包，属性值可以省略包名的前缀eslint-plugin-，属性值为，plugin:包名/配置名称 指向一个配置文件的相对路径或绝对路径 eslint:all 启用当前安装的eslint版本中所有核心规则，不推荐使用 plugins的属性值是一个字符串列表：</p><p>在使用插件之前，你必须安装它 插件名称可以省略eslint-plugin-前缀 eslint规则文档中，带扳手图标的规则就是eslint能够自动修复的规则。而不带该图标的规则，eslint则只能给出错误或警告，需要开发者手动修复。</p><h3 id="如何在老项目中加入eslint" tabindex="-1">如何在老项目中加入ESlint <a class="header-anchor" href="#如何在老项目中加入eslint" aria-label="Permalink to &quot;如何在老项目中加入ESlint&quot;">​</a></h3><ol><li>在目录中添加.editorconfig、.eslintrc.js、.eslintignore这三个文件</li><li>在package.json的”devDependencies”中加入ESlint所需要的包</li></ol><div class="language-text vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">text</span><pre class="shiki shiki-themes light-plus one-dark-pro vp-code"><code><span class="line"><span> &quot;babel-eslint&quot;: &quot;^7.1.1&quot;,  </span></span>
<span class="line"><span> &quot;eslint&quot;: &quot;^3.19.0&quot;,  </span></span>
<span class="line"><span> &quot;eslint-config-standard&quot;: &quot;^10.2.1&quot;,  </span></span>
<span class="line"><span> &quot;eslint-friendly-formatter&quot;: &quot;^3.0.0&quot;,  </span></span>
<span class="line"><span> &quot;eslint-loader&quot;: &quot;^1.7.1&quot;,  </span></span>
<span class="line"><span> &quot;eslint-plugin-html&quot;: &quot;^3.0.0&quot;,  </span></span>
<span class="line"><span> &quot;eslint-plugin-import&quot;: &quot;^2.7.0&quot;,  </span></span>
<span class="line"><span> &quot;eslint-plugin-node&quot;: &quot;^5.2.0&quot;,  </span></span>
<span class="line"><span> &quot;eslint-plugin-promise&quot;: &quot;^3.4.0&quot;,  </span></span>
<span class="line"><span> &quot;eslint-plugin-standard&quot;: &quot;^3.0.1&quot;,</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br></div></div><ol start="3"><li>在bulid/webpack.base.conf.js文件中加入ESlint规则并生效</li></ol><div class="language-text vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">text</span><pre class="shiki shiki-themes light-plus one-dark-pro vp-code"><code><span class="line"><span>//  在module的rules中加入</span></span>
<span class="line"><span>  module: {</span></span>
<span class="line"><span>    rules: [</span></span>
<span class="line"><span>      {</span></span>
<span class="line"><span>        test: /\.(js|vue)$/,</span></span>
<span class="line"><span>        loader: &#39;eslint-loader&#39;,</span></span>
<span class="line"><span>        enforce: &#39;pre&#39;,</span></span>
<span class="line"><span>        include: [resolve(&#39;src&#39;), resolve(&#39;test&#39;)],</span></span>
<span class="line"><span>        options: {</span></span>
<span class="line"><span>          formatter: require(&#39;eslint-friendly-formatter&#39;),          // 不符合Eslint规则时只警告(默认运行出错)</span></span>
<span class="line"><span>          // emitWarning: !config.dev.showEslintErrorsInOverlay</span></span>
<span class="line"><span>        }</span></span>
<span class="line"><span>      },</span></span>
<span class="line"><span>    ]</span></span>
<span class="line"><span>  }</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br></div></div><ol start="4"><li>重新bulid代码运行,完美生效!!!!!!</li></ol><h3 id="格式化属性换行-vue-max-attributes-per-line" tabindex="-1">格式化属性换行 vue/max-attributes-per-line <a class="header-anchor" href="#格式化属性换行-vue-max-attributes-per-line" aria-label="Permalink to &quot;格式化属性换行 vue/max-attributes-per-line&quot;">​</a></h3><p>vue/max-attributes-per-line 强制每行最大的属性数目 分两头</p><p>单行的情况下可以接受的数量是可配置的。（默认1）</p><p>多行的情况下，每行可接受多少个属性。（默认1）</p><div class="language-text vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">text</span><pre class="shiki shiki-themes light-plus one-dark-pro vp-code"><code><span class="line"><span>&quot;vue/max-attributes-per-line&quot;: [&quot;error&quot;, {</span></span>
<span class="line"><span>	&quot;singleline&quot;: 3,</span></span>
<span class="line"><span>	&quot;multiline&quot;: {</span></span>
<span class="line"><span>		&quot;max&quot;: 1,</span></span>
<span class="line"><span>		&quot;allowFirstLine&quot;: false</span></span>
<span class="line"><span>	}</span></span>
<span class="line"><span>}],</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br></div></div><p>个人设定的是单行每行不能超过3个，多行每行不能超过一个，而且不允许在多行的情况下第一行有属性。 举个栗子</p><div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes light-plus one-dark-pro vp-code"><code><span class="line"></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&lt;</span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">template</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">	&lt;</span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">MyComponent</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#D19A66;">		lorem</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">=</span><span style="--shiki-light:#0000FF;--shiki-dark:#98C379;">&quot;1&quot;</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#D19A66;">		ipsum</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">=</span><span style="--shiki-light:#0000FF;--shiki-dark:#98C379;">&quot;2&quot;</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#D19A66;">		dolor</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">=</span><span style="--shiki-light:#0000FF;--shiki-dark:#98C379;">&quot;3&quot;</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">	/&gt;</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&lt;/</span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">template</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br></div></div><p>当时设置allowFirstLine为false,上面代码这样的格式是不允许的。</p><p>通常vue项目推荐设置</p><div class="language-text vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">text</span><pre class="shiki shiki-themes light-plus one-dark-pro vp-code"><code><span class="line"><span>rules:{</span></span>
<span class="line"><span>	&#39;vue/max-attributes-per-line&#39;: [</span></span>
<span class="line"><span>		2,</span></span>
<span class="line"><span>		{</span></span>
<span class="line"><span>			singleline: 10,</span></span>
<span class="line"><span>			multiline: {</span></span>
<span class="line"><span>				max: 1,</span></span>
<span class="line"><span>				allowFirstLine: true // 首行允许属性</span></span>
<span class="line"><span>			}</span></span>
<span class="line"><span>		}</span></span>
<span class="line"><span>	]</span></span>
<span class="line"><span>}</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br></div></div><h2 id="配置扩展-extends" tabindex="-1">配置扩展 extends <a class="header-anchor" href="#配置扩展-extends" aria-label="Permalink to &quot;配置扩展 extends&quot;">​</a></h2><p>实际项目中配置规则的时候，不可能团队一条一条的去商议配置，太费精力了。通常的做法是使用业内大家普通使用的、遵循的编码规范；然后通过 extends 去引入这些规范。</p><p>extends 配置的时候接受字符串或者数组：</p><div class="language-text vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">text</span><pre class="shiki shiki-themes light-plus one-dark-pro vp-code"><code><span class="line"><span>{</span></span>
<span class="line"><span>    extends: [</span></span>
<span class="line"><span>        &#39;eslint:recommended&#39;,</span></span>
<span class="line"><span>        &#39;plugin:vue/essential&#39;,</span></span>
<span class="line"><span>        &#39;eslint-config-standard&#39;, // 可以缩写成 &#39;standard&#39;</span></span>
<span class="line"><span>        &#39;@vue/prettier&#39;,</span></span>
<span class="line"><span>        &#39;./node_modules/coding-standard/.eslintrc-es6&#39;</span></span>
<span class="line"><span>    ]</span></span>
<span class="line"><span>}</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br></div></div><p>从上面的配置，可以知道 extends 支持的配置类型可以是以下几种</p><ul><li>eslint 开头的：是 ESLint 官方的扩展；</li><li>plugin 开头的：是插件类型扩展，比如 plugin:vue/essential；</li><li>eslint-config 开头的：来自 npm 包，使用时可以省略前缀 eslint-config-，比如上面的可以直接写成 standard；</li><li>@开头的：扩展和 eslint-config 一样，只是在 npm 包上面加了一层作用域 scope；</li><li>一个执行配置文件的相对路径或绝对路径；</li></ul><p>那有哪些常用的、比较著名扩展可以被 extends 引入呢</p><ul><li>eslint:recommended：ESLint 内置的推荐规则，即 ESLint Rules 列表中打了钩的那些规则；</li><li>eslint:all：ESLint 内置的所有规则；</li><li>eslint-config-standard：standard 的 JS 规范；</li><li>eslint-config-prettier：关闭和 ESLint 中以及其他扩展中有冲突的规则；</li><li>eslint-config-airbnb-base：airbab 的 JS 规范；</li><li>eslint-config-alloy：腾讯 AlloyTeam 前端团队出品，可以很好的针对你项目的技术栈进行配置选择，比如可以选 React、Vue（现已支持 Vue 3.0）、TypeScript 等；</li></ul><h2 id="规则等级" tabindex="-1">规则等级 <a class="header-anchor" href="#规则等级" aria-label="Permalink to &quot;规则等级&quot;">​</a></h2><p>规则的校验说明，有 3 个报错等级</p><p>• off 或 0：关闭对该规则的校验；</p><p>• warn 或 1：启用规则，不满足时抛出警告，且不会退出编译进程；</p><p>• error 或 2：启用规则，不满足时抛出错误，且会退出编译进程；</p><p>如何知道某个扩展有哪些规则可以配置，以及每个规则具体限制？这里直接给出业内著名且使用比较多的规则列表的快速链接：</p><p>• ESLint rules，这整个列表对应 eslint:all，而打钩 ✔️ 的是 eslint:recommenmed； • Prettier rules • standard rules • airbnb rules • AlloyTeam vue rules</p><h2 id="规则的优先级" tabindex="-1">规则的优先级 <a class="header-anchor" href="#规则的优先级" aria-label="Permalink to &quot;规则的优先级&quot;">​</a></h2><ul><li>如果 extends 配置的是一个数组，那么最终会将所有规则项进行合并，出现冲突的时候，后面的会覆盖前面的；</li><li>通过 rules 单独配置的规则优先级比 extends 高；</li></ul><h2 id="针对个别文件设置新的检查规则" tabindex="-1">针对个别文件设置新的检查规则 <a class="header-anchor" href="#针对个别文件设置新的检查规则" aria-label="Permalink to &quot;针对个别文件设置新的检查规则&quot;">​</a></h2><p>比如 webpack 的中包含了某些运行时的 JS 文件，而这些文件是只跑在浏览器端的，所以需要针对这部分文件进行差异化配置：</p><div class="language-text vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">text</span><pre class="shiki shiki-themes light-plus one-dark-pro vp-code"><code><span class="line"><span>overrides: [</span></span>
<span class="line"><span>    {</span></span>
<span class="line"><span>        files: [&quot;lib/**/*.runtime.js&quot;, &quot;hot/*.js&quot;],</span></span>
<span class="line"><span>        env: {</span></span>
<span class="line"><span>            es6: false,</span></span>
<span class="line"><span>            browser: true</span></span>
<span class="line"><span>        },</span></span>
<span class="line"><span>            globals: {</span></span>
<span class="line"><span>            Promise: false</span></span>
<span class="line"><span>        },</span></span>
<span class="line"><span>        parserOptions: {</span></span>
<span class="line"><span>            ecmaVersion: 5</span></span>
<span class="line"><span>        }</span></span>
<span class="line"><span>    }</span></span>
<span class="line"><span>]</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br></div></div><h2 id="快速创建一个eslint配置文件" tabindex="-1">快速创建一个eslint配置文件 <a class="header-anchor" href="#快速创建一个eslint配置文件" aria-label="Permalink to &quot;快速创建一个eslint配置文件&quot;">​</a></h2><div class="language-text vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">text</span><pre class="shiki shiki-themes light-plus one-dark-pro vp-code"><code><span class="line"><span># 安装 eslint</span></span>
<span class="line"><span>npm i eslint -D</span></span>
<span class="line"><span></span></span>
<span class="line"><span># 初始化一个配置文件</span></span>
<span class="line"><span>npx eslint --init</span></span>
<span class="line"><span></span></span>
<span class="line"><span># 可以通过 --ext 来指定具体需要校验的文件：</span></span>
<span class="line"><span>npx eslint --ext .js,.jsx,.vue src</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br></div></div><p>把校验命令加到 package.json</p><div class="language-text vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">text</span><pre class="shiki shiki-themes light-plus one-dark-pro vp-code"><code><span class="line"><span>{</span></span>
<span class="line"><span>    &quot;scripts&quot;: {</span></span>
<span class="line"><span>        &quot;lint&quot;: &quot;npx eslint --ext .js,.jsx,.vue src&quot;,</span></span>
<span class="line"><span>        &quot;lint:fix&quot;: &quot;npx eslint --fix --ext .js,.jsx,.vue src&quot;,</span></span>
<span class="line"><span>    }</span></span>
<span class="line"><span>}</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br></div></div><p>过滤一些不需要校验的文件</p><div class="language-text vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">text</span><pre class="shiki shiki-themes light-plus one-dark-pro vp-code"><code><span class="line"><span># 在项目根目录通过创建一个 .eslintignore 文件</span></span>
<span class="line"><span>public/</span></span>
<span class="line"><span>src/main.js</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><p>除了 .eslintignore 中指定的文件或目录，ESLint 总是忽略 /node_modules/ 和 /bower_components/ 中的文件；</p><p>因此对于一些目前解决不了的规则报错，但是如果又急于打包上线，在不影响运行的情况下，我们就可以利用 .eslintignore 文件将其暂时忽略。</p><h2 id="eslint常见报错" tabindex="-1">eslint常见报错 <a class="header-anchor" href="#eslint常见报错" aria-label="Permalink to &quot;eslint常见报错&quot;">​</a></h2><p>文件末尾存在空行(eol-last)：Too many blank lines at the end of file.Max of 0 allowed</p><p>缺少分号(‘semi’: [‘error’,’always’]) :Missing semicolon</p><p>函数关键字后面缺少空格 :Missing space before function parentheses</p><p>字符串没有使用单引号(’quotes’: [1, ’single’]) ：String must use singlequote</p><p>缩进错误 ： Expected indentation of 2 spaces but found 4</p><p>没有使用全等(eqeqeq) : Expected ’ === ’ and instaed saw ‘==’</p><p>导入组件却没有使用 : ‘seller’ is defined but never used</p><p>new了一个对象却没有赋值给某个常量(可以在该实例前添加此代码/eslint-disable</p><p>no-new/忽略ESLint的检查): Do not user’new’ for side effects</p><p>超过一行空白行(no-multiple-empty-lines):More than 1 blank line not allowed</p><p>注释符 // 后面缩进错误(lines-around-comment): Expected space or tab after ‘//’ in comment</p><p>模块导入没有放在顶部：Import in body of module; reorder to top</p><p>前面缺少空格：Missing space before</p><p>已定义但是没有使用：‘scope’ is defined but never used</p><div class="language-text vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">text</span><pre class="shiki shiki-themes light-plus one-dark-pro vp-code"><code><span class="line"><span>&quot;no-alert&quot;: 0,//禁止使用alert confirm prompt</span></span>
<span class="line"><span>&quot;no-array-constructor&quot;: 2,//禁止使用数组构造器</span></span>
<span class="line"><span>&quot;no-bitwise&quot;: 0,//禁止使用按位运算符</span></span>
<span class="line"><span>&quot;no-caller&quot;: 1,//禁止使用arguments.caller或arguments.callee</span></span>
<span class="line"><span>&quot;no-catch-shadow&quot;: 2,//禁止catch子句参数与外部作用域变量同名</span></span>
<span class="line"><span>&quot;no-class-assign&quot;: 2,//禁止给类赋值</span></span>
<span class="line"><span>&quot;no-cond-assign&quot;: 2,//禁止在条件表达式中使用赋值语句</span></span>
<span class="line"><span>&quot;no-console&quot;: 2,//禁止使用console</span></span>
<span class="line"><span>&quot;no-const-assign&quot;: 2,//禁止修改const声明的变量</span></span>
<span class="line"><span>&quot;no-constant-condition&quot;: 2,//禁止在条件中使用常量表达式 if(true) if(1)</span></span>
<span class="line"><span>&quot;no-continue&quot;: 0,//禁止使用continue</span></span>
<span class="line"><span>&quot;no-control-regex&quot;: 2,//禁止在正则表达式中使用控制字符</span></span>
<span class="line"><span>&quot;no-debugger&quot;: 2,//禁止使用debugger</span></span>
<span class="line"><span>&quot;no-delete-var&quot;: 2,//不能对var声明的变量使用delete操作符</span></span>
<span class="line"><span>&quot;no-div-regex&quot;: 1,//不能使用看起来像除法的正则表达式/=foo/</span></span>
<span class="line"><span>&quot;no-dupe-keys&quot;: 2,//在创建对象字面量时不允许键重复 {a:1,a:1}</span></span>
<span class="line"><span>&quot;no-dupe-args&quot;: 2,//函数参数不能重复</span></span>
<span class="line"><span>&quot;no-duplicate-case&quot;: 2,//switch中的case标签不能重复</span></span>
<span class="line"><span>&quot;no-else-return&quot;: 2,//如果if语句里面有return,后面不能跟else语句</span></span>
<span class="line"><span>&quot;no-empty&quot;: 2,//块语句中的内容不能为空</span></span>
<span class="line"><span>&quot;no-empty-character-class&quot;: 2,//正则表达式中的[]内容不能为空</span></span>
<span class="line"><span>&quot;no-empty-label&quot;: 2,//禁止使用空label</span></span>
<span class="line"><span>&quot;no-eq-null&quot;: 2,//禁止对null使用==或!=运算符</span></span>
<span class="line"><span>&quot;no-eval&quot;: 1,//禁止使用eval</span></span>
<span class="line"><span>&quot;no-ex-assign&quot;: 2,//禁止给catch语句中的异常参数赋值</span></span>
<span class="line"><span>&quot;no-extend-native&quot;: 2,//禁止扩展native对象</span></span>
<span class="line"><span>&quot;no-extra-bind&quot;: 2,//禁止不必要的函数绑定</span></span>
<span class="line"><span>&quot;no-extra-boolean-cast&quot;: 2,//禁止不必要的bool转换</span></span>
<span class="line"><span>&quot;no-extra-parens&quot;: 2,//禁止非必要的括号</span></span>
<span class="line"><span>&quot;no-extra-semi&quot;: 2,//禁止多余的冒号</span></span>
<span class="line"><span>&quot;no-fallthrough&quot;: 1,//禁止switch穿透</span></span>
<span class="line"><span>&quot;no-floating-decimal&quot;: 2,//禁止省略浮点数中的0 .5 3.</span></span>
<span class="line"><span>&quot;no-func-assign&quot;: 2,//禁止重复的函数声明</span></span>
<span class="line"><span>&quot;no-implicit-coercion&quot;: 1,//禁止隐式转换</span></span>
<span class="line"><span>&quot;no-implied-eval&quot;: 2,//禁止使用隐式eval</span></span>
<span class="line"><span>&quot;no-inline-comments&quot;: 0,//禁止行内备注</span></span>
<span class="line"><span>&quot;no-inner-declarations&quot;: [2, &quot;functions&quot;],//禁止在块语句中使用声明（变量或函数）</span></span>
<span class="line"><span>&quot;no-invalid-regexp&quot;: 2,//禁止无效的正则表达式</span></span>
<span class="line"><span>&quot;no-invalid-this&quot;: 2,//禁止无效的this，只能用在构造器，类，对象字面量</span></span>
<span class="line"><span>&quot;no-irregular-whitespace&quot;: 2,//不能有不规则的空格</span></span>
<span class="line"><span>&quot;no-iterator&quot;: 2,//禁止使用__iterator__ 属性</span></span>
<span class="line"><span>&quot;no-label-var&quot;: 2,//label名不能与var声明的变量名相同</span></span>
<span class="line"><span>&quot;no-labels&quot;: 2,//禁止标签声明</span></span>
<span class="line"><span>&quot;no-lone-blocks&quot;: 2,//禁止不必要的嵌套块</span></span>
<span class="line"><span>&quot;no-lonely-if&quot;: 2,//禁止else语句内只有if语句</span></span>
<span class="line"><span>&quot;no-loop-func&quot;: 1,//禁止在循环中使用函数（如果没有引用外部变量不形成闭包就可以）</span></span>
<span class="line"><span>&quot;no-mixed-requires&quot;: [0, false],//声明时不能混用声明类型</span></span>
<span class="line"><span>&quot;no-mixed-spaces-and-tabs&quot;: [2, false],//禁止混用tab和空格</span></span>
<span class="line"><span>&quot;linebreak-style&quot;: [0, &quot;windows&quot;],//换行风格</span></span>
<span class="line"><span>&quot;no-multi-spaces&quot;: 1,//不能用多余的空格</span></span>
<span class="line"><span>&quot;no-multi-str&quot;: 2,//字符串不能用\换行</span></span>
<span class="line"><span>&quot;no-multiple-empty-lines&quot;: [1, {&quot;max&quot;: 2}],//空行最多不能超过2行</span></span>
<span class="line"><span>&quot;no-native-reassign&quot;: 2,//不能重写native对象</span></span>
<span class="line"><span>&quot;no-negated-in-lhs&quot;: 2,//in 操作符的左边不能有!</span></span>
<span class="line"><span>&quot;no-nested-ternary&quot;: 0,//禁止使用嵌套的三目运算</span></span>
<span class="line"><span>&quot;no-new&quot;: 1,//禁止在使用new构造一个实例后不赋值</span></span>
<span class="line"><span>&quot;no-new-func&quot;: 1,//禁止使用new Function</span></span>
<span class="line"><span>&quot;no-new-object&quot;: 2,//禁止使用new Object()</span></span>
<span class="line"><span>&quot;no-new-require&quot;: 2,//禁止使用new require</span></span>
<span class="line"><span>&quot;no-new-wrappers&quot;: 2,//禁止使用new创建包装实例，new String new Boolean new Number</span></span>
<span class="line"><span>&quot;no-obj-calls&quot;: 2,//不能调用内置的全局对象，比如Math() JSON()</span></span>
<span class="line"><span>&quot;no-octal&quot;: 2,//禁止使用八进制数字</span></span>
<span class="line"><span>&quot;no-octal-escape&quot;: 2,//禁止使用八进制转义序列</span></span>
<span class="line"><span>&quot;no-param-reassign&quot;: 2,//禁止给参数重新赋值</span></span>
<span class="line"><span>&quot;no-path-concat&quot;: 0,//node中不能使用__dirname或__filename做路径拼接</span></span>
<span class="line"><span>&quot;no-plusplus&quot;: 0,//禁止使用++，--</span></span>
<span class="line"><span>&quot;no-process-env&quot;: 0,//禁止使用process.env</span></span>
<span class="line"><span>&quot;no-process-exit&quot;: 0,//禁止使用process.exit()</span></span>
<span class="line"><span>&quot;no-proto&quot;: 2,//禁止使用__proto__属性</span></span>
<span class="line"><span>&quot;no-redeclare&quot;: 2,//禁止重复声明变量</span></span>
<span class="line"><span>&quot;no-regex-spaces&quot;: 2,//禁止在正则表达式字面量中使用多个空格 /foo bar/</span></span>
<span class="line"><span>&quot;no-restricted-modules&quot;: 0,//如果禁用了指定模块，使用就会报错</span></span>
<span class="line"><span>&quot;no-return-assign&quot;: 1,//return 语句中不能有赋值表达式</span></span>
<span class="line"><span>&quot;no-script-url&quot;: 0,//禁止使用javascript:void(0)</span></span>
<span class="line"><span>&quot;no-self-compare&quot;: 2,//不能比较自身</span></span>
<span class="line"><span>&quot;no-sequences&quot;: 0,//禁止使用逗号运算符</span></span>
<span class="line"><span>&quot;no-shadow&quot;: 2,//外部作用域中的变量不能与它所包含的作用域中的变量或参数同名</span></span>
<span class="line"><span>&quot;no-shadow-restricted-names&quot;: 2,//严格模式中规定的限制标识符不能作为声明时的变量名使用</span></span>
<span class="line"><span>&quot;no-spaced-func&quot;: 2,//函数调用时 函数名与()之间不能有空格</span></span>
<span class="line"><span>&quot;no-sparse-arrays&quot;: 2,//禁止稀疏数组， [1,,2]</span></span>
<span class="line"><span>&quot;no-sync&quot;: 0,//nodejs 禁止同步方法</span></span>
<span class="line"><span>&quot;no-ternary&quot;: 0,//禁止使用三目运算符</span></span>
<span class="line"><span>&quot;no-trailing-spaces&quot;: 1,//一行结束后面不要有空格</span></span>
<span class="line"><span>&quot;no-this-before-super&quot;: 0,//在调用super()之前不能使用this或super</span></span>
<span class="line"><span>&quot;no-throw-literal&quot;: 2,//禁止抛出字面量错误 throw &quot;error&quot;;</span></span>
<span class="line"><span>&quot;no-undef&quot;: 1,//不能有未定义的变量</span></span>
<span class="line"><span>&quot;no-undef-init&quot;: 2,//变量初始化时不能直接给它赋值为undefined</span></span>
<span class="line"><span>&quot;no-undefined&quot;: 2,//不能使用undefined</span></span>
<span class="line"><span>&quot;no-unexpected-multiline&quot;: 2,//避免多行表达式</span></span>
<span class="line"><span>&quot;no-underscore-dangle&quot;: 1,//标识符不能以_开头或结尾</span></span>
<span class="line"><span>&quot;no-unneeded-ternary&quot;: 2,//禁止不必要的嵌套 var isYes = answer === 1 ? true : false;</span></span>
<span class="line"><span>&quot;no-unreachable&quot;: 2,//不能有无法执行的代码</span></span>
<span class="line"><span>&quot;no-unused-expressions&quot;: 2,//禁止无用的表达式</span></span>
<span class="line"><span>&quot;no-unused-vars&quot;: [2, {&quot;vars&quot;: &quot;all&quot;, &quot;args&quot;: &quot;after-used&quot;}],//不能有声明后未被使用的变量或参数</span></span>
<span class="line"><span>&quot;no-use-before-define&quot;: 2,//未定义前不能使用</span></span>
<span class="line"><span>&quot;no-useless-call&quot;: 2,//禁止不必要的call和apply</span></span>
<span class="line"><span>&quot;no-void&quot;: 2,//禁用void操作符</span></span>
<span class="line"><span>&quot;no-var&quot;: 0,//禁用var，用let和const代替</span></span>
<span class="line"><span>&quot;no-warning-comments&quot;: [1, { &quot;terms&quot;: [&quot;todo&quot;, &quot;fixme&quot;, &quot;xxx&quot;], &quot;location&quot;: &quot;start&quot; }],//不能有警告备注</span></span>
<span class="line"><span>&quot;no-with&quot;: 2,//禁用with</span></span>
<span class="line"><span></span></span>
<span class="line"><span>&quot;array-bracket-spacing&quot;: [2, &quot;never&quot;],//是否允许非空数组里面有多余的空格</span></span>
<span class="line"><span>&quot;arrow-parens&quot;: 0,//箭头函数用小括号括起来</span></span>
<span class="line"><span>&quot;arrow-spacing&quot;: 0,//=&gt;的前/后括号</span></span>
<span class="line"><span>&quot;accessor-pairs&quot;: 0,//在对象中使用getter/setter</span></span>
<span class="line"><span>&quot;block-scoped-var&quot;: 0,//块语句中使用var</span></span>
<span class="line"><span>&quot;brace-style&quot;: [1, &quot;1tbs&quot;],//大括号风格</span></span>
<span class="line"><span>&quot;callback-return&quot;: 1,//避免多次调用回调什么的</span></span>
<span class="line"><span>&quot;camelcase&quot;: 2,//强制驼峰法命名</span></span>
<span class="line"><span>&quot;comma-dangle&quot;: [2, &quot;never&quot;],//对象字面量项尾不能有逗号</span></span>
<span class="line"><span>&quot;comma-spacing&quot;: 0,//逗号前后的空格</span></span>
<span class="line"><span>&quot;comma-style&quot;: [2, &quot;last&quot;],//逗号风格，换行时在行首还是行尾</span></span>
<span class="line"><span>&quot;complexity&quot;: [0, 11],//循环复杂度</span></span>
<span class="line"><span>&quot;computed-property-spacing&quot;: [0, &quot;never&quot;],//是否允许计算后的键名什么的</span></span>
<span class="line"><span>&quot;consistent-return&quot;: 0,//return 后面是否允许省略</span></span>
<span class="line"><span>&quot;consistent-this&quot;: [2, &quot;that&quot;],//this别名</span></span>
<span class="line"><span>&quot;constructor-super&quot;: 0,//非派生类不能调用super，派生类必须调用super</span></span>
<span class="line"><span>&quot;curly&quot;: [2, &quot;all&quot;],//必须使用 if(){} 中的{}</span></span>
<span class="line"><span>&quot;default-case&quot;: 2,//switch语句最后必须有default</span></span>
<span class="line"><span>&quot;dot-location&quot;: 0,//对象访问符的位置，换行的时候在行首还是行尾</span></span>
<span class="line"><span>&quot;dot-notation&quot;: [0, { &quot;allowKeywords&quot;: true }],//避免不必要的方括号</span></span>
<span class="line"><span>&quot;eol-last&quot;: 0,//文件以单一的换行符结束</span></span>
<span class="line"><span>&quot;eqeqeq&quot;: 2,//必须使用全等</span></span>
<span class="line"><span>&quot;func-names&quot;: 0,//函数表达式必须有名字</span></span>
<span class="line"><span>&quot;func-style&quot;: [0, &quot;declaration&quot;],//函数风格，规定只能使用函数声明/函数表达式</span></span>
<span class="line"><span>&quot;generator-star-spacing&quot;: 0,//生成器函数*的前后空格</span></span>
<span class="line"><span>&quot;guard-for-in&quot;: 0,//for in循环要用if语句过滤</span></span>
<span class="line"><span>&quot;handle-callback-err&quot;: 0,//nodejs 处理错误</span></span>
<span class="line"><span>&quot;id-length&quot;: 0,//变量名长度</span></span>
<span class="line"><span>&quot;indent&quot;: [2, 4],//缩进风格</span></span>
<span class="line"><span>&quot;init-declarations&quot;: 0,//声明时必须赋初值</span></span>
<span class="line"><span>&quot;key-spacing&quot;: [0, { &quot;beforeColon&quot;: false, &quot;afterColon&quot;: true }],//对象字面量中冒号的前后空格</span></span>
<span class="line"><span>&quot;lines-around-comment&quot;: 0,//行前/行后备注</span></span>
<span class="line"><span>&quot;max-depth&quot;: [0, 4],//嵌套块深度</span></span>
<span class="line"><span>&quot;max-len&quot;: [0, 80, 4],//字符串最大长度</span></span>
<span class="line"><span>&quot;max-nested-callbacks&quot;: [0, 2],//回调嵌套深度</span></span>
<span class="line"><span>&quot;max-params&quot;: [0, 3],//函数最多只能有3个参数</span></span>
<span class="line"><span>&quot;max-statements&quot;: [0, 10],//函数内最多有几个声明</span></span>
<span class="line"><span>&quot;new-cap&quot;: 2,//函数名首行大写必须使用new方式调用，首行小写必须用不带new方式调用</span></span>
<span class="line"><span>&quot;new-parens&quot;: 2,//new时必须加小括号</span></span>
<span class="line"><span>&quot;newline-after-var&quot;: 2,//变量声明后是否需要空一行</span></span>
<span class="line"><span>&quot;object-curly-spacing&quot;: [0, &quot;never&quot;],//大括号内是否允许不必要的空格</span></span>
<span class="line"><span>&quot;object-shorthand&quot;: 0,//强制对象字面量缩写语法</span></span>
<span class="line"><span>&quot;one-var&quot;: 1,//连续声明</span></span>
<span class="line"><span>&quot;operator-assignment&quot;: [0, &quot;always&quot;],//赋值运算符 += -=什么的</span></span>
<span class="line"><span>&quot;operator-linebreak&quot;: [2, &quot;after&quot;],//换行时运算符在行尾还是行首</span></span>
<span class="line"><span>&quot;padded-blocks&quot;: 0,//块语句内行首行尾是否要空行</span></span>
<span class="line"><span>&quot;prefer-const&quot;: 0,//首选const</span></span>
<span class="line"><span>&quot;prefer-spread&quot;: 0,//首选展开运算</span></span>
<span class="line"><span>&quot;prefer-reflect&quot;: 0,//首选Reflect的方法</span></span>
<span class="line"><span>&quot;quotes&quot;: [1, &quot;single&quot;],//引号类型 `` &quot;&quot; &#39;&#39;</span></span>
<span class="line"><span>&quot;quote-props&quot;:[2, &quot;always&quot;],//对象字面量中的属性名是否强制双引号</span></span>
<span class="line"><span>&quot;radix&quot;: 2,//parseInt必须指定第二个参数</span></span>
<span class="line"><span>&quot;id-match&quot;: 0,//命名检测</span></span>
<span class="line"><span>&quot;require-yield&quot;: 0,//生成器函数必须有yield</span></span>
<span class="line"><span>&quot;semi&quot;: [2, &quot;always&quot;],//语句强制分号结尾</span></span>
<span class="line"><span>&quot;semi-spacing&quot;: [0, {&quot;before&quot;: false, &quot;after&quot;: true}],//分号前后空格</span></span>
<span class="line"><span>&quot;sort-vars&quot;: 0,//变量声明时排序</span></span>
<span class="line"><span>&quot;space-after-keywords&quot;: [0, &quot;always&quot;],//关键字后面是否要空一格</span></span>
<span class="line"><span>&quot;space-before-blocks&quot;: [0, &quot;always&quot;],//不以新行开始的块{前面要不要有空格</span></span>
<span class="line"><span>&quot;space-before-function-paren&quot;: [0, &quot;always&quot;],//函数定义时括号前面要不要有空格</span></span>
<span class="line"><span>&quot;space-in-parens&quot;: [0, &quot;never&quot;],//小括号里面要不要有空格</span></span>
<span class="line"><span>&quot;space-infix-ops&quot;: 0,//中缀操作符周围要不要有空格</span></span>
<span class="line"><span>&quot;space-return-throw-case&quot;: 2,//return throw case后面要不要加空格</span></span>
<span class="line"><span>&quot;space-unary-ops&quot;: [0, { &quot;words&quot;: true, &quot;nonwords&quot;: false }],//一元运算符的前/后要不要加空格</span></span>
<span class="line"><span>&quot;spaced-comment&quot;: 0,//注释风格要不要有空格什么的</span></span>
<span class="line"><span>&quot;strict&quot;: 2,//使用严格模式</span></span>
<span class="line"><span>&quot;use-isnan&quot;: 2,//禁止比较时使用NaN，只能用isNaN()</span></span>
<span class="line"><span>&quot;valid-jsdoc&quot;: 0,//jsdoc规则</span></span>
<span class="line"><span>&quot;valid-typeof&quot;: 2,//必须使用合法的typeof的值</span></span>
<span class="line"><span>&quot;vars-on-top&quot;: 2,//var必须放在作用域顶部</span></span>
<span class="line"><span>&quot;wrap-iife&quot;: [2, &quot;inside&quot;],//立即执行函数表达式的小括号风格</span></span>
<span class="line"><span>&quot;wrap-regex&quot;: 0,//正则表达式字面量用小括号包起来</span></span>
<span class="line"><span>&quot;yoda&quot;: [2, &quot;never&quot;]//禁止尤达条件</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br><span class="line-number">32</span><br><span class="line-number">33</span><br><span class="line-number">34</span><br><span class="line-number">35</span><br><span class="line-number">36</span><br><span class="line-number">37</span><br><span class="line-number">38</span><br><span class="line-number">39</span><br><span class="line-number">40</span><br><span class="line-number">41</span><br><span class="line-number">42</span><br><span class="line-number">43</span><br><span class="line-number">44</span><br><span class="line-number">45</span><br><span class="line-number">46</span><br><span class="line-number">47</span><br><span class="line-number">48</span><br><span class="line-number">49</span><br><span class="line-number">50</span><br><span class="line-number">51</span><br><span class="line-number">52</span><br><span class="line-number">53</span><br><span class="line-number">54</span><br><span class="line-number">55</span><br><span class="line-number">56</span><br><span class="line-number">57</span><br><span class="line-number">58</span><br><span class="line-number">59</span><br><span class="line-number">60</span><br><span class="line-number">61</span><br><span class="line-number">62</span><br><span class="line-number">63</span><br><span class="line-number">64</span><br><span class="line-number">65</span><br><span class="line-number">66</span><br><span class="line-number">67</span><br><span class="line-number">68</span><br><span class="line-number">69</span><br><span class="line-number">70</span><br><span class="line-number">71</span><br><span class="line-number">72</span><br><span class="line-number">73</span><br><span class="line-number">74</span><br><span class="line-number">75</span><br><span class="line-number">76</span><br><span class="line-number">77</span><br><span class="line-number">78</span><br><span class="line-number">79</span><br><span class="line-number">80</span><br><span class="line-number">81</span><br><span class="line-number">82</span><br><span class="line-number">83</span><br><span class="line-number">84</span><br><span class="line-number">85</span><br><span class="line-number">86</span><br><span class="line-number">87</span><br><span class="line-number">88</span><br><span class="line-number">89</span><br><span class="line-number">90</span><br><span class="line-number">91</span><br><span class="line-number">92</span><br><span class="line-number">93</span><br><span class="line-number">94</span><br><span class="line-number">95</span><br><span class="line-number">96</span><br><span class="line-number">97</span><br><span class="line-number">98</span><br><span class="line-number">99</span><br><span class="line-number">100</span><br><span class="line-number">101</span><br><span class="line-number">102</span><br><span class="line-number">103</span><br><span class="line-number">104</span><br><span class="line-number">105</span><br><span class="line-number">106</span><br><span class="line-number">107</span><br><span class="line-number">108</span><br><span class="line-number">109</span><br><span class="line-number">110</span><br><span class="line-number">111</span><br><span class="line-number">112</span><br><span class="line-number">113</span><br><span class="line-number">114</span><br><span class="line-number">115</span><br><span class="line-number">116</span><br><span class="line-number">117</span><br><span class="line-number">118</span><br><span class="line-number">119</span><br><span class="line-number">120</span><br><span class="line-number">121</span><br><span class="line-number">122</span><br><span class="line-number">123</span><br><span class="line-number">124</span><br><span class="line-number">125</span><br><span class="line-number">126</span><br><span class="line-number">127</span><br><span class="line-number">128</span><br><span class="line-number">129</span><br><span class="line-number">130</span><br><span class="line-number">131</span><br><span class="line-number">132</span><br><span class="line-number">133</span><br><span class="line-number">134</span><br><span class="line-number">135</span><br><span class="line-number">136</span><br><span class="line-number">137</span><br><span class="line-number">138</span><br><span class="line-number">139</span><br><span class="line-number">140</span><br><span class="line-number">141</span><br><span class="line-number">142</span><br><span class="line-number">143</span><br><span class="line-number">144</span><br><span class="line-number">145</span><br><span class="line-number">146</span><br><span class="line-number">147</span><br><span class="line-number">148</span><br><span class="line-number">149</span><br><span class="line-number">150</span><br><span class="line-number">151</span><br><span class="line-number">152</span><br><span class="line-number">153</span><br><span class="line-number">154</span><br><span class="line-number">155</span><br><span class="line-number">156</span><br><span class="line-number">157</span><br><span class="line-number">158</span><br><span class="line-number">159</span><br><span class="line-number">160</span><br><span class="line-number">161</span><br><span class="line-number">162</span><br><span class="line-number">163</span><br><span class="line-number">164</span><br><span class="line-number">165</span><br><span class="line-number">166</span><br><span class="line-number">167</span><br><span class="line-number">168</span><br><span class="line-number">169</span><br><span class="line-number">170</span><br><span class="line-number">171</span><br><span class="line-number">172</span><br><span class="line-number">173</span><br><span class="line-number">174</span><br></div></div><div class="language-js vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki shiki-themes light-plus one-dark-pro vp-code"><code><span class="line"><span style="--shiki-light:#267F99;--shiki-dark:#E5C07B;">module</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">.</span><span style="--shiki-light:#267F99;--shiki-dark:#E5C07B;">exports</span><span style="--shiki-light:#000000;--shiki-dark:#56B6C2;"> =</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> { </span><span style="--shiki-light:#008000;--shiki-dark:#7F848E;--shiki-light-font-style:inherit;--shiki-dark-font-style:italic;">// 此项是用来告诉eslint找当前配置文件不能往父级查找</span></span>
<span class="line"><span style="--shiki-light:#001080;--shiki-dark:#E06C75;">	root</span><span style="--shiki-light:#001080;--shiki-dark:#ABB2BF;">:</span><span style="--shiki-light:#0000FF;--shiki-dark:#D19A66;"> true</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">,</span></span>
<span class="line"><span style="--shiki-light:#008000;--shiki-dark:#7F848E;--shiki-light-font-style:inherit;--shiki-dark-font-style:italic;">	// 此项是用来指定eslint解析器的，解析器必须符合规则，babel-eslint解析器是对babel解析器的包装使其与ESLint解析</span></span>
<span class="line"><span style="--shiki-light:#001080;--shiki-dark:#E06C75;">	parser</span><span style="--shiki-light:#001080;--shiki-dark:#ABB2BF;">:</span><span style="--shiki-light:#A31515;--shiki-dark:#98C379;"> &#39;babel-eslint&#39;</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">,</span></span>
<span class="line"><span style="--shiki-light:#008000;--shiki-dark:#7F848E;--shiki-light-font-style:inherit;--shiki-dark-font-style:italic;">	// 此项是用来指定javaScript语言类型和风格，sourceType用来指定js导入的方式，默认是script，此处设置为module，指某块导入方式</span></span>
<span class="line"><span style="--shiki-light:#001080;--shiki-dark:#E06C75;">	parserOptions</span><span style="--shiki-light:#001080;--shiki-dark:#ABB2BF;">:</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> {</span></span>
<span class="line"><span style="--shiki-light:#001080;--shiki-dark:#E06C75;">		sourceType</span><span style="--shiki-light:#001080;--shiki-dark:#ABB2BF;">:</span><span style="--shiki-light:#A31515;--shiki-dark:#98C379;"> &#39;module&#39;</span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">	},</span></span>
<span class="line"><span style="--shiki-light:#008000;--shiki-dark:#7F848E;--shiki-light-font-style:inherit;--shiki-dark-font-style:italic;">	// 此项指定环境的全局变量，下面的配置指定为浏览器环境</span></span>
<span class="line"><span style="--shiki-light:#001080;--shiki-dark:#E06C75;">	env</span><span style="--shiki-light:#001080;--shiki-dark:#ABB2BF;">:</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> {</span></span>
<span class="line"><span style="--shiki-light:#001080;--shiki-dark:#E06C75;">		browser</span><span style="--shiki-light:#001080;--shiki-dark:#ABB2BF;">:</span><span style="--shiki-light:#0000FF;--shiki-dark:#D19A66;"> true</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">,</span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">	},</span></span>
<span class="line"><span style="--shiki-light:#008000;--shiki-dark:#7F848E;--shiki-light-font-style:inherit;--shiki-dark-font-style:italic;">	// https://github.com/feross/standard/blob/master/RULES.md#javascript-standard-style</span></span>
<span class="line"><span style="--shiki-light:#008000;--shiki-dark:#7F848E;--shiki-light-font-style:inherit;--shiki-dark-font-style:italic;">	// 此项是用来配置标准的js风格，就是说写代码的时候要规范的写，如果你使用vs-code我觉得应该可以避免出错</span></span>
<span class="line"><span style="--shiki-light:#001080;--shiki-dark:#E06C75;">	extends</span><span style="--shiki-light:#001080;--shiki-dark:#ABB2BF;">:</span><span style="--shiki-light:#A31515;--shiki-dark:#98C379;"> &#39;standard&#39;</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">, </span><span style="--shiki-light:#008000;--shiki-dark:#7F848E;--shiki-light-font-style:inherit;--shiki-dark-font-style:italic;">// required to lint *.vue files</span></span>
<span class="line"><span style="--shiki-light:#008000;--shiki-dark:#7F848E;--shiki-light-font-style:inherit;--shiki-dark-font-style:italic;">	// 此项是用来提供插件的，插件名称省略了eslint-plugin-，下面这个配置是用来规范html的</span></span>
<span class="line"><span style="--shiki-light:#001080;--shiki-dark:#E06C75;">	plugins</span><span style="--shiki-light:#001080;--shiki-dark:#ABB2BF;">:</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> [</span></span>
<span class="line"><span style="--shiki-light:#A31515;--shiki-dark:#98C379;">		&#39;html&#39;</span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">	], </span><span style="--shiki-light:#008000;--shiki-dark:#7F848E;--shiki-light-font-style:inherit;--shiki-dark-font-style:italic;">// add your custom rules here</span></span>
<span class="line"><span style="--shiki-light:#008000;--shiki-dark:#7F848E;--shiki-light-font-style:inherit;--shiki-dark-font-style:italic;">	// 下面这些rules是用来设置从插件来的规范代码的规则，使用必须去掉前缀eslint-plugin-</span></span>
<span class="line"><span style="--shiki-light:#008000;--shiki-dark:#7F848E;--shiki-light-font-style:inherit;--shiki-dark-font-style:italic;">	// 主要有如下的设置规则，可以设置字符串也可以设置数字，两者效果一致</span></span>
<span class="line"><span style="--shiki-light:#008000;--shiki-dark:#7F848E;--shiki-light-font-style:inherit;--shiki-dark-font-style:italic;">	// &quot;off&quot; -&gt; 0 关闭规则</span></span>
<span class="line"><span style="--shiki-light:#008000;--shiki-dark:#7F848E;--shiki-light-font-style:inherit;--shiki-dark-font-style:italic;">	// &quot;warn&quot; -&gt; 1 开启警告规则</span></span>
<span class="line"><span style="--shiki-light:#008000;--shiki-dark:#7F848E;--shiki-light-font-style:inherit;--shiki-dark-font-style:italic;">	// &quot;error&quot; -&gt; 2 开启错误规则</span></span>
<span class="line"><span style="--shiki-light:#008000;--shiki-dark:#7F848E;--shiki-light-font-style:inherit;--shiki-dark-font-style:italic;">	// 了解了上面这些，下面这些代码相信也看的明白了</span></span>
<span class="line"><span style="--shiki-light:#001080;--shiki-dark:#E06C75;">	rules</span><span style="--shiki-light:#001080;--shiki-dark:#ABB2BF;">:</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> {</span></span>
<span class="line"><span style="--shiki-light:#008000;--shiki-dark:#7F848E;--shiki-light-font-style:inherit;--shiki-dark-font-style:italic;">		// allow async-await</span></span>
<span class="line"><span style="--shiki-light:#A31515;--shiki-dark:#98C379;">		&#39;generator-star-spacing&#39;</span><span style="--shiki-light:#001080;--shiki-dark:#ABB2BF;">:</span><span style="--shiki-light:#A31515;--shiki-dark:#98C379;"> &#39;off&#39;</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">,</span></span>
<span class="line"><span style="--shiki-light:#008000;--shiki-dark:#7F848E;--shiki-light-font-style:inherit;--shiki-dark-font-style:italic;">		// allow debugger during development</span></span>
<span class="line"><span style="--shiki-light:#A31515;--shiki-dark:#98C379;">		&#39;no-debugger&#39;</span><span style="--shiki-light:#001080;--shiki-dark:#ABB2BF;">:</span><span style="--shiki-light:#001080;--shiki-dark:#E5C07B;"> process</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">.</span><span style="--shiki-light:#001080;--shiki-dark:#E5C07B;">env</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">.</span><span style="--shiki-light:#0070C1;--shiki-dark:#E06C75;">NODE_ENV</span><span style="--shiki-light:#000000;--shiki-dark:#56B6C2;"> ===</span><span style="--shiki-light:#A31515;--shiki-dark:#98C379;"> &#39;production&#39;</span><span style="--shiki-light:#000000;--shiki-dark:#C678DD;"> ?</span><span style="--shiki-light:#A31515;--shiki-dark:#98C379;"> &#39;error&#39;</span><span style="--shiki-light:#000000;--shiki-dark:#C678DD;"> :</span><span style="--shiki-light:#A31515;--shiki-dark:#98C379;"> &#39;off&#39;</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">,</span></span>
<span class="line"><span style="--shiki-light:#008000;--shiki-dark:#7F848E;--shiki-light-font-style:inherit;--shiki-dark-font-style:italic;">		// js语句结尾必须使用分号</span></span>
<span class="line"><span style="--shiki-light:#A31515;--shiki-dark:#98C379;">		&#39;semi&#39;</span><span style="--shiki-light:#001080;--shiki-dark:#ABB2BF;">:</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> [</span><span style="--shiki-light:#A31515;--shiki-dark:#98C379;">&#39;off&#39;</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">, </span><span style="--shiki-light:#A31515;--shiki-dark:#98C379;">&#39;always&#39;</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">],</span></span>
<span class="line"><span style="--shiki-light:#008000;--shiki-dark:#7F848E;--shiki-light-font-style:inherit;--shiki-dark-font-style:italic;">		// 三等号</span></span>
<span class="line"><span style="--shiki-light:#A31515;--shiki-dark:#98C379;">		&#39;eqeqeq&#39;</span><span style="--shiki-light:#001080;--shiki-dark:#ABB2BF;">:</span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;"> 0</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">,</span></span>
<span class="line"><span style="--shiki-light:#008000;--shiki-dark:#7F848E;--shiki-light-font-style:inherit;--shiki-dark-font-style:italic;">		// 强制在注释中 // 或 /* 使用一致的空格</span></span>
<span class="line"><span style="--shiki-light:#A31515;--shiki-dark:#98C379;">		&#39;spaced-comment&#39;</span><span style="--shiki-light:#001080;--shiki-dark:#ABB2BF;">:</span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;"> 0</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">,</span></span>
<span class="line"><span style="--shiki-light:#008000;--shiki-dark:#7F848E;--shiki-light-font-style:inherit;--shiki-dark-font-style:italic;">		// 关键字后面使用一致的空格</span></span>
<span class="line"><span style="--shiki-light:#A31515;--shiki-dark:#98C379;">		&#39;keyword-spacing&#39;</span><span style="--shiki-light:#001080;--shiki-dark:#ABB2BF;">:</span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;"> 0</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">,</span></span>
<span class="line"><span style="--shiki-light:#008000;--shiki-dark:#7F848E;--shiki-light-font-style:inherit;--shiki-dark-font-style:italic;">		// 强制在 function的左括号之前使用一致的空格</span></span>
<span class="line"><span style="--shiki-light:#A31515;--shiki-dark:#98C379;">		&#39;space-before-function-paren&#39;</span><span style="--shiki-light:#001080;--shiki-dark:#ABB2BF;">:</span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;"> 0</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">,</span></span>
<span class="line"><span style="--shiki-light:#008000;--shiki-dark:#7F848E;--shiki-light-font-style:inherit;--shiki-dark-font-style:italic;">		// 引号类型</span></span>
<span class="line"><span style="--shiki-light:#A31515;--shiki-dark:#98C379;">		&#39;quotes&#39;</span><span style="--shiki-light:#001080;--shiki-dark:#ABB2BF;">:</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> [</span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;">0</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">, </span><span style="--shiki-light:#A31515;--shiki-dark:#98C379;">&#39;single&#39;</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">],</span></span>
<span class="line"><span style="--shiki-light:#008000;--shiki-dark:#7F848E;--shiki-light-font-style:inherit;--shiki-dark-font-style:italic;">		// 禁止出现未使用过的变量</span></span>
<span class="line"><span style="--shiki-light:#008000;--shiki-dark:#7F848E;--shiki-light-font-style:inherit;--shiki-dark-font-style:italic;">		// &#39;no-unused-vars&#39;: 0,</span></span>
<span class="line"><span style="--shiki-light:#008000;--shiki-dark:#7F848E;--shiki-light-font-style:inherit;--shiki-dark-font-style:italic;">		// 要求或禁止末尾逗号</span></span>
<span class="line"><span style="--shiki-light:#A31515;--shiki-dark:#98C379;">		&#39;comma-dangle&#39;</span><span style="--shiki-light:#001080;--shiki-dark:#ABB2BF;">:</span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;"> 0</span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">	}</span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">}</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br><span class="line-number">32</span><br><span class="line-number">33</span><br><span class="line-number">34</span><br><span class="line-number">35</span><br><span class="line-number">36</span><br><span class="line-number">37</span><br><span class="line-number">38</span><br><span class="line-number">39</span><br><span class="line-number">40</span><br><span class="line-number">41</span><br><span class="line-number">42</span><br><span class="line-number">43</span><br><span class="line-number">44</span><br><span class="line-number">45</span><br><span class="line-number">46</span><br><span class="line-number">47</span><br><span class="line-number">48</span><br></div></div><h2 id="使用-eslint-自动调整-import-代码顺序" tabindex="-1">使用 eslint 自动调整 import 代码顺序 <a class="header-anchor" href="#使用-eslint-自动调整-import-代码顺序" aria-label="Permalink to &quot;使用 eslint 自动调整 import 代码顺序&quot;">​</a></h2><p>提供 sort-imports 能力的插件有好几个，试了一下，eslint-plugin-simple-import-sort 最靠谱。</p><div class="language-bash vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki shiki-themes light-plus one-dark-pro vp-code"><code><span class="line"><span style="--shiki-light:#795E26;--shiki-dark:#61AFEF;">yarn</span><span style="--shiki-light:#A31515;--shiki-dark:#98C379;"> add</span><span style="--shiki-light:#0000FF;--shiki-dark:#D19A66;"> -D</span><span style="--shiki-light:#A31515;--shiki-dark:#98C379;"> eslint-plugin-simple-import-sort</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><p>配置 在 .eslintrc 中分别加入：</p><div class="language-json vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">json</span><pre class="shiki shiki-themes light-plus one-dark-pro vp-code"><code><span class="line"><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">{</span></span>
<span class="line"><span style="--shiki-light:#0451A5;--shiki-dark:#E06C75;">  &quot;plugins&quot;</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">: [</span></span>
<span class="line"><span style="--shiki-light:#A31515;--shiki-dark:#98C379;">    &quot;simple-import-sort&quot;</span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">  ],</span></span>
<span class="line"><span style="--shiki-light:#0451A5;--shiki-dark:#E06C75;">  &quot;rules&quot;</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">: {</span></span>
<span class="line"><span style="--shiki-light:#0451A5;--shiki-dark:#E06C75;">    &quot;simple-import-sort/imports&quot;</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">: </span><span style="--shiki-light:#A31515;--shiki-dark:#98C379;">&quot;error&quot;</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">,</span></span>
<span class="line"><span style="--shiki-light:#0451A5;--shiki-dark:#E06C75;">    &quot;simple-import-sort/exports&quot;</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">: </span><span style="--shiki-light:#A31515;--shiki-dark:#98C379;">&quot;error&quot;</span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">  }</span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">}</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br></div></div><p>体验 执行 eslint --fix src/**，完美。</p><h2 id="react相关" tabindex="-1">React相关 <a class="header-anchor" href="#react相关" aria-label="Permalink to &quot;React相关&quot;">​</a></h2><h3 id="react-编译模式配置" tabindex="-1">React 编译模式配置 <a class="header-anchor" href="#react-编译模式配置" aria-label="Permalink to &quot;React 编译模式配置&quot;">​</a></h3><p>如果 React 使用的是新的编译模式（无需手动导入 React），需要在 extends 中加入 plugin:react/jsx-runtime。</p><div class="language-json vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">json</span><pre class="shiki shiki-themes light-plus one-dark-pro vp-code"><code><span class="line"><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">{</span></span>
<span class="line"><span style="--shiki-light:#0451A5;--shiki-dark:#E06C75;">  &quot;extends&quot;</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">: [</span></span>
<span class="line highlighted"><span style="--shiki-light:#A31515;--shiki-dark:#98C379;">    &quot;plugin:react/jsx-runtime&quot;</span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">  ]</span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">}</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><p>同时 tsconfig 文件中的 <code>“jsx”: “react-jsx” </code>也是对应的新模式。</p><h3 id="react-属性自动排序规则配置" tabindex="-1">React 属性自动排序规则配置 <a class="header-anchor" href="#react-属性自动排序规则配置" aria-label="Permalink to &quot;React 属性自动排序规则配置&quot;">​</a></h3><p>安装依赖：</p><div class="language-bash vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki shiki-themes light-plus one-dark-pro vp-code"><code><span class="line"><span style="--shiki-light:#795E26;--shiki-dark:#61AFEF;">ni</span><span style="--shiki-light:#0000FF;--shiki-dark:#D19A66;"> -D</span><span style="--shiki-light:#A31515;--shiki-dark:#98C379;"> eslint-plugin-react</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><p>确保 eslint 配置文件中 extends 的部分存在 <code>plugin:react/recommended</code>。</p><p>React 组件的属性可以借助 eslint 的能力来进行自动排序，在配置文件的 rule 中打开即可。</p><div class="language-text vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">text</span><pre class="shiki shiki-themes light-plus one-dark-pro vp-code"><code><span class="line"><span>{</span></span>
<span class="line"><span>  &quot;rules&quot;: {</span></span>
<span class="line"><span>    &quot;react/jsx-sort-props&quot;: [</span></span>
<span class="line"><span>      &quot;error&quot;,</span></span>
<span class="line"><span>      {</span></span>
<span class="line"><span>        &quot;callbacksLast&quot;: true</span></span>
<span class="line"><span>      }</span></span>
<span class="line"><span>    ]</span></span>
<span class="line"><span>  }</span></span>
<span class="line"><span>}</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br></div></div><h2 id="contributors" tabindex="-1">Contributors <a class="header-anchor" href="#contributors" aria-label="Permalink to &quot;Contributors&quot;">​</a></h2><div><section class="border-b-1 border-[var(--vp-c-divider)] w-full border-b-solid mt-[24px] pb-[12px] flex gap-[12px] mb-[12px] flex-wrap max-w-[85%]"><div class="flex gap-[4px] items-center"><svg style="display:inline-block;" viewBox="0 0 16 16" width="1.2em" height="1.2em"><path fill="currentColor" d="M8 16A8 8 0 1 1 8 0a8 8 0 0 1 0 16m.847-8.145a2.502 2.502 0 1 0-1.694 0C5.471 8.261 4 9.775 4 11c0 .395.145.995 1 .995h6c.855 0 1-.6 1-.995c0-1.224-1.47-2.74-3.153-3.145"></path></svg> 作者:<span>Long Mo</span></div><!----><!----><div class="flex gap-[4px] items-center"><svg style="display:inline-block;" viewBox="0 0 16 16" width="1.2em" height="1.2em"><path fill="currentColor" d="M9.293 0H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V4.707A1 1 0 0 0 13.707 4L10 .293A1 1 0 0 0 9.293 0zM9.5 3.5v-2l3 3h-2a1 1 0 0 1-1-1zM5.485 6.879l1.036 4.144l.997-3.655a.5.5 0 0 1 .964 0l.997 3.655l1.036-4.144a.5.5 0 0 1 .97.242l-1.5 6a.5.5 0 0 1-.967.01L8 9.402l-1.018 3.73a.5.5 0 0 1-.967-.01l-1.5-6a.5.5 0 1 1 .97-.242z"></path></svg> 字数统计:<span>7.3k 字</span></div><div class="flex gap-[4px] items-center"><svg style="display:inline-block;" viewBox="0 0 20 20" width="1.2em" height="1.2em"><path fill="currentColor" d="M10 0a10 10 0 1 0 10 10A10 10 0 0 0 10 0zm2.5 14.5L9 11V4h2v6l3 3z"></path></svg> 阅读时长:<span>28 分钟</span></div></section></div><div class="flex gap-2 items-center"><a href="https://github.com/Longmo666" rel="noreferrer" target="_blank"><img src="https://github.com/Longmo666.png" class="w-8 h-8 rounded-full"></a> Long Mo</div><div class="px-[1.2rem] relative py-[1rem] border-1 border-[var(--vp-c-border)]/[.55] w-full min-h-[32px] border-solid mt-[32px] leading-[24px] rounded-[4px]"><svg style="display:inline-block;" viewBox="0 0 512 512" width="1.2em" height="1.2em" class="absolute top-[1rem] right-[1.2rem]"><path fill="currentColor" d="M256 512a256 256 0 1 0 0-512a256 256 0 1 0 0 512m-56.6-199.4c31.2 31.2 81.9 31.2 113.1 0c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9c-50 50-131 50-181 0s-50-131 0-181s131-50 181 0c9.4 9.4 9.4 24.6 0 33.9s-24.6 9.4-33.9 0c-31.2-31.2-81.9-31.2-113.1 0s-31.2 81.9 0 113.1z"></path></svg><section class="flex flex-col gap-y-[8px] overflow-hidden"><div><span class="font-bold">文章作者：</span><span><a href="https://github.com/Longmo666" rel="noreferrer" target="_blank">Long Mo</a></span></div><div><span class="font-bold">版权声明：</span><span> 本博客所有文章除特别声明外，均采用 <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/" rel="noreferrer" target="_blank"> CC BY-NC-SA 4.0 </a> 许可协议。转载请注明来自 <a href="#" rel="noreferrer" target="_blank">Longmo Docs</a></span> ！ </div></section></div></div></div></main><footer class="VPDocFooter" data-v-e512d8d8 data-v-73a75ed6><!--[--><!--]--><div class="edit-info" data-v-73a75ed6><div class="edit-link" data-v-73a75ed6><a class="VPLink link vp-external-link-icon no-icon edit-link-button" href="https://github.com/xxx" target="_blank" rel="noreferrer" data-v-73a75ed6><!--[--><span class="vpi-square-pen edit-link-icon" data-v-73a75ed6></span> 在 github 上编辑此页<!--]--></a></div><div class="last-updated" data-v-73a75ed6><p class="VPLastUpdated" data-v-73a75ed6 data-v-28126c9f>上次更新: <time datetime="2024-04-07T16:13:37.000Z" data-v-28126c9f></time></p></div></div><nav class="prev-next" data-v-73a75ed6><div class="pager" data-v-73a75ed6><!----></div><div class="pager" data-v-73a75ed6><a class="VPLink link pager-link next" href="/long-press/standard/CodeReview%E4%BB%A3%E7%A0%81%E5%AE%A1%E6%9F%A5" data-v-73a75ed6><!--[--><span class="desc" data-v-73a75ed6>下一篇</span><span class="title" data-v-73a75ed6>CodeReview代码审查</span><!--]--></a></div></nav></footer><!--[--><!--]--></div></div></div><!--[--><!--]--></div></div><footer class="VPFooter has-sidebar" data-v-4c760b95 data-v-4f1388a4><div class="container" data-v-4f1388a4><!----><p class="copyright" data-v-4f1388a4>Copyright © 2024-present Longmo</p></div></footer><!--[--><!--]--></div></div>
    <script>window.__VP_HASH_MAP__=JSON.parse("{\"css3_lightningcss_index.md\":\"DvrpJ9-C\",\"css3_现代web布局_02.md\":\"NnFPbKjC\",\"css3_postcss_postcss-prefix-selector增加统一作用域.md\":\"BTi7xZ9T\",\"css3_现代web布局_01.md\":\"CSOVLYFa\",\"css3_index.md\":\"gWeubSHW\",\"css3_现代web布局_05.md\":\"XnHgE5qs\",\"css3_现代web布局_07.md\":\"B0JalRYm\",\"electron_electron开发实战_index.md\":\"DlTk4nHM\",\"css3_现代web布局_10.md\":\"QvmMy1qK\",\"css3_现代web布局_03.md\":\"DndCH4AP\",\"css3_现代web布局_22.md\":\"BTcBI1Ar\",\"css3_现代web布局_index.md\":\"BRrTkyN-\",\"react_antd使用踩坑经验汇总_procomponents_index.md\":\"CnA6aYv_\",\"nodejs_change-case更改大小写.md\":\"CtntdOEt\",\"react_react好用的插件_rxjs-hooks.md\":\"CahRrTvr\",\"nodejs_复制移动文件.md\":\"DJvz4Dcu\",\"css3_现代web布局_15.md\":\"CxTdKubj\",\"css3_现代web布局_06.md\":\"DKzKVbHi\",\"guide_axios封装.md\":\"yeyMeLKL\",\"react_react实战_设计模式与最佳实践_服务器端渲染（1）：基本套路.md\":\"Ci9ZteTc\",\"react_react实战_设计模式与最佳实践_react 单元测试.md\":\"ghuW9_Ym\",\"react_react好用的插件_react-to-print.md\":\"DUEXVCMF\",\"css3_现代web布局_12.md\":\"DzvNLnB9\",\"react_react好用的插件_react-load-script.md\":\"DBiqdA1k\",\"electron_electron开发实战_释放前端想象力.md\":\"DjfKiu2P\",\"react_react实战_设计模式与最佳实践_react的设计思想.md\":\"CDFxAnJB\",\"react_react组件库搭建指南_02开发调试.md\":\"C_T24zrV\",\"react_react实战_设计模式与最佳实践_react 的未来（1）： 拥抱异步渲染.md\":\"DDCdfFZA\",\"react_react实战_设计模式与最佳实践_react 状态管理（1）：组件状态.md\":\"CleS-bmU\",\"react_react好用的插件_react-viewer.md\":\"CK92G5ky\",\"electron_electron开发实战_electron应用打包.md\":\"DVihGNUt\",\"react_react好用的插件_index.md\":\"CYvYsgxN\",\"react_react好用的插件_formik-antd.md\":\"BVXoD1vi\",\"react_react实战_设计模式与最佳实践_组件设计模式（2）：高阶组件.md\":\"tcEHCkX9\",\"react_css解决方案_styled-components.md\":\"BdEVJSYP\",\"react_react后台管理系统项目实战_index.md\":\"Cf5Aki5e\",\"react_react好用的插件_floating-ui.md\":\"CJ47U607\",\"react_react好用的插件_js-pinyin.md\":\"CCi7zpiQ\",\"electron_electron开发实战_原生gui.md\":\"CKymHWIE\",\"react_antd使用踩坑经验汇总_tabs选项卡.md\":\"DbBQtB84\",\"react_react好用的插件_immer.md\":\"J3J2rLev\",\"css3_现代web布局_08.md\":\"CKAlv-cw\",\"react_react好用的插件_@ebay_nice-modal-react.md\":\"2t81QhzX\",\"react_react hooks.md\":\"DllmXlwe\",\"react_发布订阅_事件总线.md\":\"DGl0tyUU\",\"react_react组件库搭建指南_03编译打包.md\":\"BSWt83_X\",\"guide_quickstart.md\":\"DNtvLzj7\",\"react_开发一个组件库_如何完善组件单测.md\":\"9v27j5fA\",\"react_慕课网最新react技术栈，实战复杂低代码项目-仿问卷星_index.md\":\"DV2mTP-I\",\"react_ahooks_usewhydidyouupdate.md\":\"DeDGpqMK\",\"react_开发一个组件库_index.md\":\"DFCM9Fyc\",\"react_ahooks_usemutationobserver.md\":\"DopGRhup\",\"react_ahooks_uselocalstoragestate.md\":\"CNKG9DfH\",\"react_如何写出更优雅的 react 组件.md\":\"BNRAsuz5\",\"react_ahooks_useeventlistener.md\":\"C022IGRg\",\"react_ahooks_useloading.md\":\"hmNqPF-b\",\"react_ahooks_usethrottle.md\":\"Cxs7sHDg\",\"react_ahooks_usevirtuallist.md\":\"CbSqBIa_\",\"react_ahooks_index.md\":\"BZgeYQAN\",\"react_ahooks_usethrottleeffect.md\":\"Cu9lbAeN\",\"react_ahooks_useinterval.md\":\"z_JjaRUC\",\"react_ahooks_useinfinitescroll.md\":\"05X3BT3k\",\"react_ahooks_useboolean.md\":\"B9uk9pv1\",\"react_ahooks_usehover.md\":\"CQ90ygMl\",\"react_ahooks_usetoggle.md\":\"Dhg-kOcZ\",\"css3_现代web布局_16.md\":\"DqleGwZV\",\"electron_前端必学的桌面开发：electron_react开发桌面应用_1w多字超详细.md\":\"B4S71t_j\",\"react_index.md\":\"VMykJvDU\",\"react_ahooks_usethrottlefn.md\":\"h86SJGdz\",\"react_ahooks_useurlstate.md\":\"N0NRnJcE\",\"react_ahooks_usetrackedeffect.md\":\"DikGGrmT\",\"react_状态管理_natur.md\":\"CjabmgMv\",\"react_ahooks_useantdtable.md\":\"BRTEfq-4\",\"react_ahooks_userafinterval.md\":\"DbqchCta\",\"react_ahooks_useunmount.md\":\"DKpqgfJ2\",\"getting_index.md\":\"CslhLb_Q\",\"react_ahooks_usepagination.md\":\"BZPuA30r\",\"react_react好用的插件_react-jsx-parse.md\":\"BFws_Jvt\",\"react_ahooks_useprevious.md\":\"DoaMcKL0\",\"react_数据请求的reacthooks库_index.md\":\"BVjU5EHg\",\"nodejs_解压缩.md\":\"B8sDL8Ck\",\"react_开发一个组件库_handlebars模板.md\":\"eFtlYiJE\",\"react_自定义hooks_useasynceffect.md\":\"0TOcgDP8\",\"react_ahooks_usewebsocket.md\":\"BSCnKAhD\",\"css3_现代web布局_09.md\":\"CJg03gvR\",\"react_ahooks_useasynceffect.md\":\"LHnOKcnJ\",\"移动端项目_index.md\":\"BYabTvu-\",\"react_ahooks_usememoizedfn.md\":\"BHTS7A7g\",\"typescript_晋级typescript高手，成为抢手的前端开发人才_index.md\":\"BOXXNcld\",\"typescript_晋级typescript高手，成为抢手的前端开发人才_第04章 ts 类易被忽视的重要技能，单件设计模式和相关技能深入.md\":\"CCgSUH_B\",\"typescript_晋级typescript高手，成为抢手的前端开发人才_第11章 运用 ts 手写 promise 源码.md\":\"BalHRnKD\",\"react_性能监控_index.md\":\"BLRO71Ft\",\"typescript_晋级typescript高手，成为抢手的前端开发人才_第03章 ts类方法代码优化的三大法宝： 函数重载、类方法重载、类构造器重载.md\":\"BS1BYvbm\",\"standard_fatherrc.ts配置文件.md\":\"Dkdjh5--\",\"react_自定义hooks_useexceldownload.md\":\"DGb3CWTU\",\"tools_runjs.md\":\"IzZ9xe5N\",\"tools_自动版本管理和生成changelog.md\":\"Dak6Id3b\",\"react_react实战_设计模式与最佳实践_路由的魔法：react router.md\":\"CZ2pkqmc\",\"tools_依赖镜像地址.md\":\"D5Etjm_v\",\"react_react实战_设计模式与最佳实践_组件设计模式（5）：组合组件.md\":\"D54UFiB5\",\"tools_workspaces核心特性总结.md\":\"CxNbObiL\",\"react_自定义hooks_usegreatasync.md\":\"DRVA9yrK\",\"react_react组件库搭建指南_05标准化发布流程.md\":\"BCCPnMto\",\"react_react实战_设计模式与最佳实践_组件设计模式（1）：聪明组件和傻瓜组件.md\":\"tHZI-Xkb\",\"typescript_晋级typescript高手，成为抢手的前端开发人才_第05章 ts继承深入_手写优化底层源码.md\":\"B3EQqYKB\",\"tools_rollup打包.md\":\"tSbCVBX5\",\"tools_webstorm快捷键.md\":\"wTpb7qJx\",\"react_react实战_设计模式与最佳实践_服务器端渲染（2）理解nextjs.md\":\"BqBtpEHC\",\"tools_vscode使用教程.md\":\"CqieXqJ8\",\"react_react最佳实践.md\":\"CG2Xrs5X\",\"typescript_晋级typescript高手，成为抢手的前端开发人才_第07章 泛型类_泛型接口_泛型类约束的复杂应用【无比重要的深度技能】.md\":\"CuEcP3SC\",\"react_自定义hooks_useeffectenhanced.md\":\"BSK0VwJa\",\"vue_index.md\":\"OW-QE8NS\",\"react_状态管理_react中的组件通信方案.md\":\"D8VvM0h8\",\"typescript_ts 从入门到深度掌握，晋级typescript高手实战课程_index.md\":\"CHFAmRtj\",\"standard_pretty-quick.md\":\"CL9LWL6Z\",\"typescript_ts 从入门到深度掌握，晋级typescript高手实战课程_第10章ts声明文件，ts模块.md\":\"BgUWX90K\",\"react_ahooks_usesetstate.md\":\"jYidiqGI\",\"typescript_晋级typescript高手，成为抢手的前端开发人才_第06章 ts高频使用技能： 类型断言、类型守卫、自定义守卫_ 多态_类型守卫组合应用.md\":\"DTiCfWrY\",\"standard_typings.d.ts.md\":\"COgkopwu\",\"react_react实战_设计模式与最佳实践_组件设计模式（4）：提供者模式.md\":\"CpJkLsBD\",\"typescript_axios_index.md\":\"CjiV2R0j\",\"css3_现代web布局_23.md\":\"DtcX9bTS\",\"electron_electron开发实战_app特性.md\":\"CCGKgh2J\",\"tools_常用命令.md\":\"BCECAPPN\",\"react_ahooks_useupdateeffect.md\":\"B8UnIDT1\",\"tools_npm镜像源管理工具.md\":\"BQvl6-cK\",\"react_自定义hooks_index.md\":\"TbSBlD7i\",\"typescript_晋级typescript高手，成为抢手的前端开发人才_第15章 js 原型_复杂原型继承 【查漏补缺】.md\":\"Bym60KVf\",\"typescript_晋级typescript高手，成为抢手的前端开发人才_第12章整合vue3手写高水准大厂的ts版vuex4源码.md\":\"Cb3ALa6o\",\"react_css解决方案_css_module.md\":\"kmxgfb6l\",\"css3_现代web布局_04.md\":\"qxIAivzd\",\"react_ahooks_useraftimeout.md\":\"zZ6X2MGp\",\"react_自定义hooks_usecopy.md\":\"B_vVrQah\",\"react_useform.md\":\"D7K5ezD8\",\"css3_现代web布局_27.md\":\"DVEkZdZW\",\"react_状态管理_valtio.md\":\"CXPGtt95\",\"typescript_tsup如何使用.md\":\"CHCfoXjX\",\"react_ahooks_usecookiestate.md\":\"CdRty31d\",\"tools_node各类命令.md\":\"Dp8hvkZX\",\"electron_electron开发实战_electron优化白屏.md\":\"TluuIOV8\",\"css3_现代web布局_24.md\":\"BTAj5AxQ\",\"css3_现代web布局_13.md\":\"BvIlMTco\",\"css3_现代web布局_14.md\":\"CXYZfM8r\",\"react_antd使用踩坑经验汇总_antdtable表格.md\":\"DJY5Mvdl\",\"guide_babel.md\":\"DTbGDSVq\",\"react_状态管理_zustand翻译文档.md\":\"D72s6MxU\",\"guide_index.md\":\"zNzT7elx\",\"tools_资源导航.md\":\"ByR0zpON\",\"react_antd使用踩坑经验汇总_menu菜单.md\":\"CUT3snoK\",\"tools_pnpm多包项目.md\":\"B5SWK1rS\",\"guide_webpack插件.md\":\"RycubFW9\",\"typescript_晋级typescript高手，成为抢手的前端开发人才_第02章 全栈思维全面深度掌握 ts 类.md\":\"DT7QMqkY\",\"typescript_晋级typescript高手，成为抢手的前端开发人才_第10章 从装饰器应用，底层 js 到 仿 nestjs实战，路由器底层复杂泛型.md\":\"D8kaCtfy\",\"electron_electron开发实战_开发一个简单版的番茄钟.md\":\"CrvCihNB\",\"react_ahooks_useclickaway.md\":\"CZiIOkBS\",\"index.md\":\"C-4ajOyn\",\"react_自定义hooks_useinterval.md\":\"CL7txl3c\",\"nodejs_请求工具类.md\":\"pJv1vv26\",\"react_ahooks_usedebouncefn.md\":\"DoBqhrGU\",\"getting_why.md\":\"B0La2IDF\",\"vue_vue2打包优化.md\":\"o7QF6PW3\",\"nodejs_globby.md\":\"CTH274g9\",\"standard_tsconfig.json.md\":\"CFCzGYxu\",\"react_reactrouter.md\":\"B9PtxEJ9\",\"typescript_ts-challenge.md\":\"CQjhG-Mq\",\"css3_现代web布局_18.md\":\"DbKppEVn\",\"react_ahooks_usedebounce.md\":\"DRqZkoSI\",\"react_自定义hooks_useintersection.md\":\"Bvd3uAWW\",\"nodejs_cli工具_index.md\":\"CGwLSUZ5\",\"react_react实战_设计模式与最佳实践_index.md\":\"C8mvV9MI\",\"tools_规范git代码提交信息.md\":\"BASOsPqX\",\"tools_windows测试ip端口.md\":\"DG6x0Mw8\",\"electron_electron开发实战_使用nodejs调用原生模块.md\":\"CRvmiRGG\",\"nodejs_kill-port跨平台解决端口占用问题.md\":\"BEoOmVOA\",\"css3_现代web布局_28.md\":\"jsAdcmE1\",\"react_react实战_设计模式与最佳实践_组件实践（1）：如何定义清晰可维护的接口.md\":\"C9ky0LxI\",\"react_react实战_设计模式与最佳实践_react 的未来（3）：函数化的 hooks.md\":\"CFPGDH01\",\"react_react组件库搭建指南_index.md\":\"DavlhH-3\",\"react_react避坑指南_usecallback_usememo.md\":\"DBJVYTaL\",\"standard_prettier.md\":\"B8zmNcDZ\",\"react_react实战_设计模式与最佳实践_组件设计模式（3）：render props 模式.md\":\"J6wo2neN\",\"standard_git提交规范.md\":\"BY6vFgPF\",\"css3_现代web布局_26.md\":\"BlwKd9DD\",\"react_redux.md\":\"BR83V68G\",\"nodejs_fs-extra文件系统扩展.md\":\"BeGbM1-y\",\"react_react组件库搭建指南_06dumi2.x的使用.md\":\"BovenX8E\",\"tools_github常用技巧.md\":\"DCwuF17j\",\"electron_数据持久缓存方案_electron-store.md\":\"6LHFkhuG\",\"typescript_晋级typescript高手，成为抢手的前端开发人才_第08章 深度掌握泛型函数、泛型函数重载【无比重要的深度技能】.md\":\"BvOBMPMd\",\"nodejs_semantic-release.md\":\"B_4_SZrq\",\"react_react实战_设计模式与最佳实践_组件实践（2）：组件的内部实现.md\":\"pvpT0TG5\",\"typescript_tslib如何使用.md\":\"BsoCW_pQ\",\"react_react实战_设计模式与最佳实践_组件实践（3）：组件化样式.md\":\"DGiADrWs\",\"react_css解决方案_index.md\":\"Q7QSPlYi\",\"typescript_tsdx使用.md\":\"Bcl_A70V\",\"css3_现代web布局_17.md\":\"BCxBKcNP\",\"react_react避坑指南_usestate.md\":\"DK9-NLHJ\",\"electron_react中开发踩坑.md\":\"DpZMxt4e\",\"react_react实战_设计模式与最佳实践_react 的未来（2）：suspense 带来的异步操作革命.md\":\"BLMrhryT\",\"guide_两个跨域页面进行跳转传参的终极方案.md\":\"DrhWeMH4\",\"react_react避坑指南_index.md\":\"DSoRNwmH\",\"react_自定义hooks_useinputhistory.md\":\"BzWdP5Ij\",\"react_ahooks_useeventemitter.md\":\"OluScTeX\",\"react_自定义hooks_usedebounce.md\":\"7ESFZNIZ\",\"electron_dll使用.md\":\"CGmPSJLR\",\"css3_现代web布局_19.md\":\"DIVJU0PC\",\"react_react好用的插件_react-fast-marquee.md\":\"ZhOvpApp\",\"guide_markdown语法.md\":\"BiAJoIJO\",\"nodejs_execa执行外部命令.md\":\"x2fLlbix\",\"nodejs_npkill快速查找删除node_modules.md\":\"CCmNiMZ0\",\"react_ahooks_usefullscreen.md\":\"BkgW8e5k\",\"react_自定义hooks_usesetparticalstate.md\":\"BUv_cnmS\",\"standard_css规范.md\":\"DeHg6jnS\",\"electron_数据持久缓存方案_数据持久缓存库lndb.md\":\"DJUK7UVx\",\"react_自定义组件_如何在react应用中建立错误处理层.md\":\"CNGgmToJ\",\"react_react搞定复杂项目状态管理_index.md\":\"BAj7---e\",\"typescript_晋级typescript高手，成为抢手的前端开发人才_第09章 深入infer、ts高级类型、泛型再进阶【全方位深度掌握 ts 泛型】.md\":\"C4bu5mph\",\"tools_idea 注释模板配置.md\":\"0gbuJbd6\",\"electron_基于electron-vite构建react桌面客户端.md\":\"DLOPvG7Q\",\"nodejs_release-it.md\":\"DMPaqLXc\",\"react_react实战_设计模式与最佳实践_react 状态管理（3）：mobx 使用模式.md\":\"Bm7xwY_i\",\"react_ahooks_usehistorytravel.md\":\"DiEJa1G5\",\"css3_现代web布局_21.md\":\"D2PeNBzk\",\"css3_现代web布局_11.md\":\"B10tI7m_\",\"react_antd使用踩坑经验汇总_tree组件.md\":\"CHpE5yvc\",\"electron_electron-builder.md\":\"DNL_pnq4\",\"standard_vue规范.md\":\"DyiLpRai\",\"electron_index.md\":\"BRqk3UrY\",\"react_自定义hooks_userouter.md\":\"LSydLgnY\",\"utils_rxjs.md\":\"C9QQC7cC\",\"standard_codereview代码审查.md\":\"vOhADmqT\",\"react_ahooks_userequest函数.md\":\"erWiB1Ub\",\"react_自定义hooks_usedebouncefn.md\":\"CD-kzD_X\",\"linux_linux常用命令.md\":\"D7RSIp22\",\"standard_commitlint.md\":\"Bc6BHMQJ\",\"react_自定义hooks_uselocationlisten.md\":\"lpoaVI0f\",\"standard_组件封装规范.md\":\"0Ow45yWm\",\"react_自定义hooks_useecharts.md\":\"GJwF9MkV\",\"nodejs_bluebird超高性能的promise库.md\":\"DY98ImvT\",\"react_react避坑指南_useref.md\":\"fBjuCQ9O\",\"electron_electron开发实战_electron环境搭建.md\":\"BaHlrXyB\",\"utils_index.md\":\"mk7T0j55\",\"react_自定义hooks_useevent.md\":\"Comn2-Er\",\"typescript_index.md\":\"Dcw9VPNE\",\"standard_git分支开发规范.md\":\"BIXsyTAc\",\"electron_三方库.md\":\"CAt92F-s\",\"react_react组件库搭建指南_01项目初始化.md\":\"hYE7GWll\",\"react_react好用的插件_jsbarcode.md\":\"CBTRcUAR\",\"electron_electron-react-boilerplate.md\":\"BzWSbABc\",\"react_自定义hooks_usemodal.md\":\"B_XFkn0G\",\"standard_editorconfig.md\":\"D8UrOG7b\",\"tools_git基本使用.md\":\"BvP_0S5g\",\"react_react避坑指南_闭包陷阱.md\":\"zChJGfX2\",\"standard_prettierrc.md\":\"BdHhuL9t\",\"standard_babelrc.md\":\"DxUrlX2l\",\"standard_eslint规范.md\":\"Mu3t4FWn\",\"react_react实战_设计模式与最佳实践_react 状态管理（4）：不同方式对比.md\":\"C3iD1iFV\",\"react_antd使用踩坑经验汇总_index.md\":\"DDsanD1T\",\"tools_yalc本地调试组件库方案.md\":\"BQ3H5AQN\",\"standard_json格式规范.md\":\"B3NuLvz_\",\"electron_配置讲解.md\":\"Bz4ASaED\",\"nodejs_index.md\":\"D6qsbk0v\",\"standard_node_cjs和esm混合开发.md\":\"DedlYZ1u\",\"css3_现代web布局_25.md\":\"DZBc6jqi\",\"standard_stylelint.md\":\"zaLGDP6-\",\"react_自定义hooks_useformmodal.md\":\"DRclMTXI\",\"standard_开源证书.md\":\"CNa1gXoD\",\"react_antd使用踩坑经验汇总_其他弹出层.md\":\"CYvGLZdo\",\"utils_baseinputnumber.md\":\"CCJr66pT\",\"guide_installation.md\":\"Cyna48DO\",\"utils_lodash.md\":\"B_LD-ulc\",\"standard_react规范.md\":\"BDzywc_U\",\"standard_sytlelint.md\":\"BHAGjA08\",\"tools_readme.md自动生成目录.md\":\"Doh9u-Eg\",\"react_自定义hooks_usememo.md\":\"CZgD0tn_\",\"standard_gitignore.md\":\"DGdE7Xq3\",\"react_react避坑指南_useeffect.md\":\"BNAb8N04\",\"nodejs_pkg打包node程序.md\":\"C_mVgg8Y\",\"standard_husky.md\":\"DWpB1fyF\",\"utils_calcutils.md\":\"QyONwp33\",\"tools_index.md\":\"CrRsxT5W\",\"standard_index.md\":\"zy5tYKLI\",\"react_自定义hooks_usemethods.md\":\"CLURCU9f\",\"react_自定义hooks_useloadscript.md\":\"CYcWRvSo\",\"tools_google快捷键.md\":\"mD76rDlK\",\"standard_package.json.md\":\"jsOo3MDQ\",\"standard_前端开发最佳实践总结.md\":\"BGrFiLKW\",\"react_自定义hooks_usesafestate.md\":\"m62ZMP2_\",\"standard_prettierignore.md\":\"VM68Ff5l\",\"react_react实战_设计模式与最佳实践_react 状态管理（2）：redux 使用模式.md\":\"CA0pcV96\",\"utils_mitt.md\":\"DG7F8qQl\",\"standard_gitlab.yml.md\":\"lN9PqoBe\",\"nodejs_minimist命令行参数解析.md\":\"Dx4gEgi2\",\"standard_命名规范.md\":\"DWUPIS4I\",\"react_自定义hooks_usepersistcallback.md\":\"FHXVMyDJ\",\"tools_windows终端优化.md\":\"DANvAyOj\",\"electron_ssl证书.md\":\"Q1dQBluF\",\"react_自定义组件_lazyload.md\":\"B9Bn4iLf\",\"react_自定义组件_keepalive.md\":\"YY9acXG_\",\"tools_常用node库.md\":\"DTeGhNPp\",\"standard_lint-staged.md\":\"DidcSpvQ\",\"css3_现代web布局_20.md\":\"DVP5FwHt\",\"guide_数字相关知识.md\":\"BRzTdbnI\",\"standard_圈复杂度.md\":\"B-UtHNKH\",\"tools_windows快捷键.md\":\"BFgiqO74\",\"standard_ts规范.md\":\"CiDbO0cg\",\"react_antd使用踩坑经验汇总_form表单.md\":\"DGT8jzsZ\",\"react_状态管理_zustand.md\":\"CQAFP37K\",\"react_react好用的插件_react-hook-form.md\":\"BsJSOnXN\"}");window.__VP_SITE_DATA__=JSON.parse("{\"lang\":\"zh-CN\",\"dir\":\"ltr\",\"title\":\"龙陌的博客\",\"description\":\"基于vite为基础搭建的风格脚手架,提供多种模板以便于更高效的解决业务需求！\",\"base\":\"/long-press/\",\"head\":[],\"router\":{\"prefetchLinks\":true},\"appearance\":true,\"themeConfig\":{\"logo\":\"/logo.ico\",\"nav\":[{\"text\":\"💻 首页\",\"link\":\"/\"},{\"text\":\"💡 指南\",\"link\":\"/guide/\",\"activeMatch\":\"/guide/\"},{\"text\":\"🔧 编程工具\",\"link\":\"/tools/\"},{\"text\":\"🔧 常用工具类\",\"link\":\"/utils/\"},{\"text\":\"📋 前端规范\",\"link\":\"/standard/\"},{\"text\":\"⭐ React\",\"link\":\"/react/React实战,设计模式与最佳实践/\"},{\"text\":\"⭐ TypeScript\",\"link\":\"/typescript/\"},{\"text\":\"⭐ Css3\",\"link\":\"/css3/\"},{\"text\":\"⭐ Electron\",\"link\":\"/electron/\"},{\"text\":\"⭐ Linux\",\"link\":\"/linux/linux常用命令\",\"activeMatch\":\"/linux/\"}],\"socialLinks\":[{\"icon\":\"github\",\"link\":\"https://vitepress.vuejs.org/guide/getting-started\"},{\"icon\":{\"svg\":\"<svg xmlns=\\\"http://www.w3.org/2000/svg\\\" xmlns:xlink=\\\"http://www.w3.org/1999/xlink\\\" aria-hidden=\\\"true\\\" role=\\\"img\\\" width=\\\"20\\\" height=\\\"20\\\"  viewBox=\\\"0 0 512 512\\\" >\\n    <path fill=\\\"currentColor\\\" d=\\\"M488.6 104.1c16.7 18.1 24.4 39.7 23.3 65.7v202.4c-.4 26.4-9.2 48.1-26.5 65.1c-17.2 17-39.1 25.9-65.5 26.7H92.02c-26.45-.8-48.21-9.8-65.28-27.2C9.682 419.4.767 396.5 0 368.2V169.8c.767-26 9.682-47.6 26.74-65.7C43.81 87.75 65.57 78.77 92.02 78h29.38L96.05 52.19c-5.75-5.73-8.63-13-8.63-21.79c0-8.8 2.88-16.06 8.63-21.797C101.8 2.868 109.1 0 117.9 0s16.1 2.868 21.9 8.603L213.1 78h88l74.5-69.397C381.7 2.868 389.2 0 398 0c8.8 0 16.1 2.868 21.9 8.603c5.7 5.737 8.6 12.997 8.6 21.797c0 8.79-2.9 16.06-8.6 21.79L394.6 78h29.3c26.4.77 48 9.75 64.7 26.1zm-38.8 69.7c-.4-9.6-3.7-17.4-10.7-23.5c-5.2-6.1-14-9.4-22.7-9.8H96.05c-9.59.4-17.45 3.7-23.58 9.8c-6.14 6.1-9.4 13.9-9.78 23.5v194.4c0 9.2 3.26 17 9.78 23.5s14.38 9.8 23.58 9.8H416.4c9.2 0 17-3.3 23.3-9.8c6.3-6.5 9.7-14.3 10.1-23.5V173.8zm-264.3 42.7c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.2 6.3-14 9.5-23.6 9.5c-9.6 0-17.5-3.2-23.6-9.5c-6.1-6.3-9.4-14-9.8-23.2v-33.3c.4-9.1 3.8-16.9 10.1-23.2c6.3-6.3 13.2-9.6 23.3-10c9.2.4 17 3.7 23.3 10zm191.5 0c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.1 6.3-14 9.5-23.6 9.5c-9.6 0-17.4-3.2-23.6-9.5c-7-6.3-9.4-14-9.7-23.2v-33.3c.3-9.1 3.7-16.9 10-23.2c6.3-6.3 14.1-9.6 23.3-10c9.2.4 17 3.7 23.3 10z\\\"></path>\\n  </svg>\"},\"link\":\"https://space.bilibili.com/248956095\"}],\"footer\":{\"copyright\":\"Copyright © 2024-present Longmo\"},\"sidebar\":{\"/\":[{\"text\":\"开始阅读\",\"collapsed\":false,\"items\":[{\"text\":\"阅读须知\",\"link\":\"/guide\"}]}],\"/tools/\":[{\"collapsed\":false,\"items\":[{\"text\":\"GitHub常用技巧\",\"link\":\"\\\\tools\\\\GitHub常用技巧.md\"},{\"text\":\"Google快捷键\",\"link\":\"\\\\tools\\\\Google快捷键.md\"},{\"text\":\"README.md自动生成目录\",\"link\":\"\\\\tools\\\\README.md自动生成目录.md\"},{\"text\":\"Rollup打包\",\"link\":\"\\\\tools\\\\Rollup打包.md\"},{\"text\":\"Runjs\",\"link\":\"\\\\tools\\\\Runjs.md\"},{\"text\":\"Vscode使用教程\",\"link\":\"\\\\tools\\\\Vscode使用教程.md\"},{\"text\":\"WebStorm快捷键\",\"link\":\"\\\\tools\\\\WebStorm快捷键.md\"},{\"text\":\"Windows快捷键\",\"link\":\"\\\\tools\\\\Windows快捷键.md\"},{\"text\":\"Windows测试IP端口\",\"link\":\"\\\\tools\\\\Windows测试IP端口.md\"},{\"text\":\"Windows终端优化\",\"link\":\"\\\\tools\\\\Windows终端优化.md\"},{\"text\":\"Yalc本地调试组件库方案\",\"link\":\"\\\\tools\\\\Yalc本地调试组件库方案.md\"},{\"text\":\"git基本使用\",\"link\":\"\\\\tools\\\\git基本使用.md\"},{\"text\":\"idea 注释模板配置\",\"link\":\"\\\\tools\\\\idea 注释模板配置.md\"},{\"text\":\"node各类命令\",\"link\":\"\\\\tools\\\\node各类命令.md\"},{\"text\":\"npm镜像源管理工具\",\"link\":\"\\\\tools\\\\npm镜像源管理工具.md\"},{\"text\":\"pnpm多包项目\",\"link\":\"\\\\tools\\\\pnpm多包项目.md\"},{\"text\":\"workspaces核心特性总结\",\"link\":\"\\\\tools\\\\workspaces核心特性总结.md\"},{\"text\":\"依赖镜像地址\",\"link\":\"\\\\tools\\\\依赖镜像地址.md\"},{\"text\":\"常用node库\",\"link\":\"\\\\tools\\\\常用node库.md\"},{\"text\":\"常用命令\",\"link\":\"\\\\tools\\\\常用命令.md\"},{\"text\":\"自动版本管理和生成CHANGELOG\",\"link\":\"\\\\tools\\\\自动版本管理和生成CHANGELOG.md\"},{\"text\":\"规范GIT代码提交信息\",\"link\":\"\\\\tools\\\\规范GIT代码提交信息.md\"},{\"text\":\"资源导航\",\"link\":\"\\\\tools\\\\资源导航.md\"}]}],\"/standard/\":[{\"collapsed\":false,\"items\":[{\"text\":\"CodeReview代码审查\",\"link\":\"\\\\standard\\\\CodeReview代码审查.md\"},{\"text\":\"Css规范\",\"link\":\"\\\\standard\\\\Css规范.md\"},{\"text\":\"Git分支开发规范\",\"link\":\"\\\\standard\\\\Git分支开发规范.md\"},{\"text\":\"Node_CJS和ESM混合开发\",\"link\":\"\\\\standard\\\\Node_CJS和ESM混合开发.md\"},{\"text\":\"React规范\",\"link\":\"\\\\standard\\\\React规范.md\"},{\"text\":\"babelrc\",\"link\":\"\\\\standard\\\\babelrc.md\"},{\"text\":\"commitlint\",\"link\":\"\\\\standard\\\\commitlint.md\"},{\"text\":\"editorconfig\",\"link\":\"\\\\standard\\\\editorconfig.md\"},{\"text\":\"eslint规范\",\"link\":\"\\\\standard\\\\eslint规范.md\"},{\"text\":\"fatherrc.ts配置文件\",\"link\":\"\\\\standard\\\\fatherrc.ts配置文件.md\"},{\"text\":\"gitignore\",\"link\":\"\\\\standard\\\\gitignore.md\"},{\"text\":\"gitlab.yml\",\"link\":\"\\\\standard\\\\gitlab.yml.md\"},{\"text\":\"git提交规范\",\"link\":\"\\\\standard\\\\git提交规范.md\"},{\"text\":\"husky\",\"link\":\"\\\\standard\\\\husky.md\"},{\"text\":\"json格式规范\",\"link\":\"\\\\standard\\\\json格式规范.md\"},{\"text\":\"lint-staged\",\"link\":\"\\\\standard\\\\lint-staged.md\"},{\"text\":\"package.json\",\"link\":\"\\\\standard\\\\package.json.md\"},{\"text\":\"prettier\",\"link\":\"\\\\standard\\\\prettier.md\"},{\"text\":\"prettierignore\",\"link\":\"\\\\standard\\\\prettierignore.md\"},{\"text\":\"prettierrc\",\"link\":\"\\\\standard\\\\prettierrc.md\"},{\"text\":\"pretty-quick\",\"link\":\"\\\\standard\\\\pretty-quick.md\"},{\"text\":\"stylelint\",\"link\":\"\\\\standard\\\\stylelint.md\"},{\"text\":\"sytlelint\",\"link\":\"\\\\standard\\\\sytlelint.md\"},{\"text\":\"tsconfig.json\",\"link\":\"\\\\standard\\\\tsconfig.json.md\"},{\"text\":\"ts规范\",\"link\":\"\\\\standard\\\\ts规范.md\"},{\"text\":\"typings.d.ts\",\"link\":\"\\\\standard\\\\typings.d.ts.md\"},{\"text\":\"vue规范\",\"link\":\"\\\\standard\\\\vue规范.md\"},{\"text\":\"前端开发最佳实践总结\",\"link\":\"\\\\standard\\\\前端开发最佳实践总结.md\"},{\"text\":\"命名规范\",\"link\":\"\\\\standard\\\\命名规范.md\"},{\"text\":\"圈复杂度\",\"link\":\"\\\\standard\\\\圈复杂度.md\"},{\"text\":\"开源证书\",\"link\":\"\\\\standard\\\\开源证书.md\"},{\"text\":\"组件封装规范\",\"link\":\"\\\\standard\\\\组件封装规范.md\"}]}],\"/aHooks/\":[],\"/utils/\":[{\"collapsed\":false,\"items\":[{\"text\":\"BaseInputNumber\",\"link\":\"\\\\utils\\\\BaseInputNumber.md\"},{\"text\":\"calcUtils\",\"link\":\"\\\\utils\\\\calcUtils.md\"},{\"text\":\"lodash\",\"link\":\"\\\\utils\\\\lodash.md\"},{\"text\":\"mitt\",\"link\":\"\\\\utils\\\\mitt.md\"},{\"text\":\"rxjs\",\"link\":\"\\\\utils\\\\rxjs.md\"}]}],\"/guide/\":[{\"text\":\"基础\",\"items\":[{\"text\":\"快速开始\",\"link\":\"/guide/quickstart\"},{\"text\":\"Markdown语法\",\"link\":\"/guide/Markdown语法\"}]},{\"text\":\"进阶\",\"items\":[{\"text\":\"打包指南\",\"link\":\"/guide/打包指南\"}]}],\"/react/\":{\"base\":\"/react/\",\"items\":[{\"text\":\"React基础\",\"base\":\"/react/\",\"collapsed\":false,\"items\":[{\"text\":\"Redux\",\"link\":\"Redux\"},{\"text\":\"React Hooks\",\"link\":\"React Hooks\"},{\"text\":\"ReactRouter\",\"link\":\"ReactRouter\"}]},{\"text\":\"Antd使用踩坑经验汇总\",\"base\":\"/react/Antd使用踩坑经验汇总/\",\"items\":[{\"text\":\"Form表单\",\"link\":\"Form表单\"},{\"text\":\"AntdTable表格\",\"link\":\"AntdTable表格\"},{\"text\":\"Tree树组件\",\"link\":\"Tree组件\"},{\"text\":\"其他弹出层\",\"link\":\"其他弹出层\"},{\"text\":\"Tabs选项卡\",\"link\":\"Tabs选项卡\"},{\"text\":\"Menu菜单\",\"link\":\"Menu菜单\"},{\"text\":\"Menu菜单\",\"link\":\"Menu菜单\"}]},{\"text\":\"CSS解决方案\",\"base\":\"/react/CSS解决方案/\",\"items\":[{\"text\":\"CSS Module\",\"link\":\"CSS_Module\"}]},{\"text\":\"ahooks\",\"link\":\"/aHooks/\"},{\"text\":\"自定义Hooks\",\"base\":\"/react/自定义Hooks/\",\"items\":[{\"text\":\"useRouter\",\"link\":\"useRouter\"},{\"text\":\"useLoadScript\",\"link\":\"useLoadScript\"},{\"text\":\"useInputHistory\",\"link\":\"useInputHistory\"},{\"text\":\"useSetParticalState\",\"link\":\"useSetParticalState\"},{\"text\":\"useFormModal\",\"link\":\"useFormModal\"},{\"text\":\"useCopy\",\"link\":\"useCopy\"},{\"text\":\"useIntersection\",\"link\":\"useIntersection\"},{\"text\":\"useModal\",\"link\":\"useModal\"},{\"text\":\"useInterval\",\"link\":\"useInterval\"},{\"text\":\"useModal\",\"link\":\"useModal\"},{\"text\":\"useModal\",\"link\":\"useModal\"}]},{\"text\":\"React实战：设计模式和最佳实践\",\"base\":\"/react/React实战,设计模式与最佳实践/\",\"collapsed\":true,\"items\":[{\"text\":\"React的设计思想\",\"link\":\"React的设计思想\"},{\"text\":\"组件实践（1）：如何定义清晰可维护的接口\",\"link\":\"组件实践（1）：如何定义清晰可维护的接口\"},{\"text\":\"组件实践（2）：组件的内部实现\",\"link\":\"组件实践（2）：组件的内部实现\"},{\"text\":\"组件实践（3）：组件化样式\",\"link\":\"组件实践（3）：组件化样式\"},{\"text\":\"组件设计模式（1）：聪明组件和傻瓜组件\",\"link\":\"组件设计模式（1）：聪明组件和傻瓜组件\"},{\"text\":\"组件设计模式（2）：高阶组件\",\"link\":\"组件设计模式（2）：高阶组件\"},{\"text\":\"组件设计模式（3）：render props 模式\",\"link\":\"组件设计模式（3）：render props 模式\"},{\"text\":\"组件设计模式（4）：提供者模式\",\"link\":\"组件设计模式（4）：提供者模式\"},{\"text\":\"组件设计模式（5）：组合组件\",\"link\":\"组件设计模式（5）：组合组件\"},{\"text\":\"React 单元测试\",\"link\":\"React 单元测试\"},{\"text\":\"React 状态管理（1）：组件状态\",\"link\":\"React 状态管理（1）：组件状态\"},{\"text\":\"React 状态管理（2）：Redux 使用模式\",\"link\":\"React 状态管理（2）：Redux 使用模式\"},{\"text\":\"React 状态管理（3）：Mobx 使用模式\",\"link\":\"React 状态管理（3）：Mobx 使用模式\"},{\"text\":\"React 状态管理（4）：不同方式对比\",\"link\":\"React 状态管理（4）：不同方式对比\"},{\"text\":\"路由的魔法：React Router\",\"link\":\"路由的魔法：React Router\"},{\"text\":\"服务器端渲染（1）：基本套路\",\"link\":\"服务器端渲染（1）：基本套路\"},{\"text\":\"服务器端渲染（2):理解Nextjs\",\"link\":\"服务器端渲染（2）理解NextJS\"},{\"text\":\"React 的未来（1）： 拥抱异步渲染\",\"link\":\"React 的未来（1）： 拥抱异步渲染\"},{\"text\":\"React 的未来（2）：Suspense 带来的异步操作革命\",\"link\":\"React 的未来（2）：Suspense 带来的异步操作革命\"},{\"text\":\"React 的未来（3）：函数化的 Hooks\",\"link\":\"React 的未来（3）：函数化的 Hooks\"}]},{\"text\":\"React搞定复杂项目状态管理\",\"base\":\"/react/React搞定复杂项目状态管理/\",\"collapsed\":false,\"items\":[]},{\"text\":\"React后台管理系统项目实战\",\"base\":\"/react/React后台管理系统项目实战/\",\"collapsed\":false,\"items\":[]},{\"text\":\"慕课网最新React技术栈，实战复杂低代码项目-仿问卷星\",\"base\":\"/react/慕课网最新React技术栈，实战复杂低代码项目-仿问卷星/\",\"collapsed\":false,\"items\":[]},{\"text\":\"React状态管理\",\"base\":\"/react/状态管理/\",\"collapsed\":false,\"items\":[{\"text\":\"zustand\",\"link\":\"zustand\"},{\"text\":\"zustand翻译文档\",\"link\":\"zustand翻译文档\"}]},{\"text\":\"开发一个组件库\",\"base\":\"/react/开发一个组件库/\",\"items\":[{\"text\":\"如何完善组件单测\",\"link\":\"如何完善组件单测\"},{\"text\":\"handlebars模板\",\"link\":\"handlebars模板\"}]},{\"text\":\"React好用的插件\",\"base\":\"/react/React好用的插件/\",\"items\":[{\"text\":\"js-pinyin\",\"link\":\"js-pinyin\"},{\"text\":\"jsbarcode\",\"link\":\"jsbarcode\"},{\"text\":\"react-jsx-parse\",\"link\":\"react-jsx-parse\"},{\"text\":\"react-load-script\",\"link\":\"react-load-script\"},{\"text\":\"react-to-print\",\"link\":\"react-to-print\"},{\"text\":\"react-viewer\",\"link\":\"react-viewer\"},{\"text\":\"react-hook-form\",\"link\":\"react-hook-form\"},{\"text\":\"react-window-infinite-loader\",\"link\":\"react-window-infinite-loader\"},{\"text\":\"react-window-infinite-loader\",\"link\":\"react-window-infinite-loader\"},{\"text\":\"react-window-infinite-loader\",\"link\":\"react-window-infinite-loader\"}]}]},\"/typescript/\":{\"base\":\"/typescript/\",\"items\":[{\"text\":\"TypeScript\",\"base\":\"/typescript/\",\"collapsed\":false,\"items\":[{\"text\":\"Redux\",\"link\":\"Redux\"}]},{\"text\":\"TS 从入门到深度掌握，晋级TypeScript高手实战课程\",\"base\":\"/typescript/TS 从入门到深度掌握，晋级TypeScript高手实战课程/\",\"collapsed\":false,\"items\":[{\"text\":\"第10章TS声明文件，TS模块.md\",\"link\":\"第10章TS声明文件，TS模块\"}]},{\"text\":\"晋级TypeScript高手，成为抢手的前端开发人才\",\"base\":\"/typescript/晋级TypeScript高手，成为抢手的前端开发人才/\",\"collapsed\":false,\"items\":[{\"text\":\"第07章 泛型类+泛型接口+泛型类约束的复杂应用【无比重要的深度技能】\",\"link\":\"第07章 泛型类+泛型接口+泛型类约束的复杂应用【无比重要的深度技能】\"},{\"text\":\"第08章 深度掌握泛型函数、泛型函数重载【无比重要的深度技能】\",\"link\":\"第08章 深度掌握泛型函数、泛型函数重载【无比重要的深度技能】\"},{\"text\":\"第09章 深入infer、TS高级类型、泛型再进阶【全方位深度掌握 TS 泛型】\",\"link\":\"第09章 深入infer、TS高级类型、泛型再进阶【全方位深度掌握 TS 泛型】\"},{\"text\":\"第08章 深度掌握泛型函数、泛型函数重载【无比重要的深度技能】\",\"link\":\"第08章 深度掌握泛型函数、泛型函数重载【无比重要的深度技能】\"}]}]},\"/css3/\":{\"base\":\"/css3/\",\"items\":[{\"text\":\"现代web布局\",\"base\":\"/css3/现代web布局/\",\"collapsed\":false,\"items\":[{\"text\":\"Web 布局技术演进：了解 Web 布局发展史\",\"link\":\"01\"},{\"text\":\"现代 Web 布局技术术语\",\"link\":\"02\"},{\"text\":\"Flexbox 布局基础使用\",\"link\":\"03\"},{\"text\":\"Flexbox 布局中的对齐方式\",\"link\":\"04\"},{\"text\":\"Flexbox 布局中的 flex 属性的基础运用\",\"link\":\"05\"},{\"text\":\"Flexbox 中的计算：通过扩展因子比例来扩展 Flex 项目\",\"link\":\"06\"},{\"text\":\"Flexbox 中的计算：通过收缩因子比例收缩 Flex 项目\",\"link\":\"07\"},{\"text\":\"Flexbox 布局中的 flex-basis：谁能决定 Flex 项目的大小？\",\"link\":\"08\"},{\"text\":\"使用 Flexbox 构建经典布局：10 种经典 Web 布局\",\"link\":\"09\"},{\"text\":\"10\",\"link\":\"10\"}]},{\"text\":\"postcss\",\"base\":\"/css3/postcss/\",\"collapsed\":false,\"items\":[{\"text\":\"postcss-prefix-selector增加统一作用域\",\"link\":\"postcss-prefix-selector增加统一作用域\"}]}]},\"/electron/\":{\"base\":\"/electron/\",\"items\":[{\"text\":\"electron开发实战\",\"base\":\"/electron/electron开发实战/\",\"collapsed\":false,\"items\":[{\"text\":\"Electron 环境搭建+前期准备\",\"link\":\"electron环境搭建\"},{\"text\":\"开发一个简单版的番茄钟\",\"link\":\"开发一个简单版的番茄钟\"},{\"text\":\"APP特性\",\"link\":\"App特性\"},{\"text\":\"原生GUI\",\"link\":\"原生GUI\"},{\"text\":\"使用NodeJs调用原生模块\",\"link\":\"使用NodeJs调用原生模块\"},{\"text\":\"释放前端想象力\",\"link\":\"释放前端想象力\"},{\"text\":\"Electron优化白屏\",\"link\":\"electron优化白屏\"},{\"text\":\"Electron应用打包\",\"link\":\"electron应用打包\"}]},{\"text\":\"Electron数据持久化方案\",\"base\":\"/electron/数据持久化方案/\",\"collapsed\":false,\"items\":[{\"text\":\"electron-store\",\"link\":\"electron-store\"},{\"text\":\"数据持久缓存库lndb\",\"link\":\"数据持久缓存库lndb\"}]},{\"text\":\"react中开发踩坑\",\"link\":\"/electron/react中开发踩坑\"}]}},\"outline\":{\"level\":[2,6],\"label\":\"本页目录\"},\"docFooter\":{\"prev\":\"上一篇\",\"next\":\"下一篇\"},\"lastUpdated\":{\"text\":\"上次更新\"},\"returnToTopLabel\":\"返回顶部\",\"darkModeSwitchLabel\":\"外观\",\"sidebarMenuLabel\":\"归档\",\"editLink\":{\"pattern\":\"https://github.com/xxx\",\"text\":\"在 github 上编辑此页\"},\"search\":{\"provider\":\"local\",\"options\":{\"translations\":{\"button\":{\"buttonText\":\"搜索文档\",\"buttonAriaLabel\":\"搜索文档\"},\"modal\":{\"noResultsText\":\"无法找到相关结果\",\"resetButtonTitle\":\"清除查询条件\",\"footer\":{\"selectText\":\"选择\",\"navigateText\":\"切换\"}}}}}},\"locales\":{},\"scrollOffset\":134,\"cleanUrls\":true}");</script>
    
  </body>
</html>